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.
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
from the root directory.