DEV Community


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


  • Executed only from the root of the project

  • use bash

      python && 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 && npm run concat-css
Enter fullscreen mode Exit fullscreen mode

from the root directory.

Discussion (0)