CxJS and Tailwind CSS
Tailwind CSS is a utility-first CSS framework packed with classes like flex, pt-4, text-center and rotate-90 that can be composed to build any design, directly in your markup.
CxJS is a JavaScript framework designed for building large single-page applications such as administration consoles and dashboards. CxJS can be easily combined with CSS frameworks such as Bootstrap or Tailwind CSS as all CSS classes generated by the framework are prefixed. This post is about Tailwind CSS and how it nicely complements CxJS.
There are many benefits that Tailwind CSS brings. For me, number one is the productivity gain achieved by not having to come up with names for CSS classes and separately edit .css and .js files. Large projects have too many files already, and CSS always feels disconnected from the rest of the code. The same question always pops up — where should CSS files be located? Should they be at a completely separate location or colocated with the application components? How do you find a CSS class in a large project and how can you be sure that making a small change will not break things somewhere else.
With Tailwind CSS, you don’t have to come up with names for CSS classes, in most cases you don’t even need to write any CSS at all. You simply apply bits and pieces from an extremely large pool of predefined utility classes.
