DEV Community

tompston
tompston

Posted on

Generate self defined CSS utility-first classes with python

I really like the concept of tailwind. Using predefined classes and not writing css is a great time saver. But i don't like their defined classes that deal with width, height, padding and margin.

I checked my previous projects and surprise surprise, it seems like those are the CSS properties that are used / repeated the most, so i wrote a script that can generate self defined classes, for which the incrementing values also can be self defined.

Generate self-defined utility CSS classes with python

Link to article explaining this

Command

  • Executed only from the root of the project

  • use bash

      python generate_css_class.py && npm run concat-css
    

credits to this for css concatenation




With the script, we can define the first value, last value and increment of the values based on our needs for the CSS classes. To be clearer, We can have a width class which can increase by 5px from the range of 0-200 or we can have a range of 0-400 and increment of 2px etc etc etc. All up to your needs.

The current setup generates classes with a

  • 2px increment from 0-100
  • 5px increment from 100-600

You can also define which classes you want to use. I picked the currently defined ones due to the fact that, upon the inspection of previously written piles of css, it seems like those are the ones that are repeated most often.

If you want to

  • define your own classes,
  • change the range or increment values

just change the python script and run

python generate_css_class.py && npm run concat-css
Enter fullscreen mode Exit fullscreen mode

from the root directory.

Discussion (0)