Tailwind, the language
2020-01-31
I'm working with Tailwind CSS lately and I started to bump into its limitations. I keep needing classes that are not available. I keep going back to the config file and extend it. My CSS file size goes up every time.
Then I had an epiphany.
I'm not really programming using Tailwind's classes. I'm programming in the Tailwind language. Otherwise I wouldn't think of writing active:opacity-10.
Tailwind's classes have the properties of a language. They are composable. They have parameters. Like, the 4 in m-4 looks like an argument to me. Maybe instead of defining the classes in advance, we should create a compiler for generating the classes on demand?
Think about the use of Postcss to reduce the generated file size. We are to generate all possible classes only to remove the unused ones? Maybe we should only generate the used ones instead?
Then we would have access to the entire space of possible Tailwind classes. Once the CSS file size limitation is gone, our brains could shift to think in the language. We could start growing the language instead of the class list. For example, lg:active:opacity-10 totally makes sense to me. Or lg:active:border-t-red-900.
In practice, m-4 could be a function. It would call the function m with argument 4. The function would return the class m-4 and generate the necessary CSS classes for it to work.
It could be both generated on the server and on the client when using dynamic apps.
Tibor
I'm working on the Boomla Website OS - a simple website builder and web development platform.