Because I am primarily a backend developer, I have not paid much attention to innovations in frontend technology. Once I had learned the basics of the Bootstrap css framework, I didn’t really feel the need for learning about the details of css layout. But with my recent journey into frontend development, I also took a look at tailwindcss. As it turns out, this is exactly what I have been needing all my backend-developer-life. Its workflow is pretty much what I have been doing with Bootstrap most of the time: just adding a whole bunch of utility-classes directly to html elements, instead of neatly defining my own classes in css.
Coming from Bootstrap, I had to learn a couple of things when starting with tailwindcss:
- following the tailwindcss installation docs removes all styles – even for h1, h2, ul etc., while Bootstrap comes with a default look & feel (theme?) – you can easily add some base styles, but they are not provided out of the box. Or can simply remove the line
@tailwind base;from theindex.cssto retain the current style. Note, however, that removing@tailwind base;will probably leave you open to browser inconsistencies, as noted in the first paragraph of the documentation. - with tailwindcss you must use a processing pipeline to reduce unused styles, otherwise your files will be too big – tailwindcss is actually a postcss plugin itself
- you must make yourself familiar with the processing pipeline so that you understand what styles will be removed – this is not difficult to understand, it’s just something you should know before you get started
If you liked this post, please, do share it:
Thanks, for reading (and sharing)! 🥳