Tailwind CSS is a popular utility-first CSS framework that allows developers to quickly build modern and responsive user interfaces. The framework provides a large set of pre-defined utility classes that can be easily applied to HTML elements, helping to create visually appealing designs without having to write custom CSS code.
As example, the following HTML markup will create a link with a primary text color
For those familiar with preprocessors like SCSS, Tailwind CSS provides an organized and easy-to-learn approach to styling web applications. While SCSS allows us to write custom CSS code using variables, functions, and mixins, Tailwind CSS follows a utility-first approach where pre-defined CSS classes are used directly in HTML markup.
While the framework provides a large set of utility classes, it is essential to combine them with components in order to create a consistent user interface without writing repetitive code. By using Tailwind CSS with components, we can achieve a clean, efficient, and scalable design system.
Useful resources:
Apollux uses the Shuriken UI preset which extends the default Tailwind CSS configuration without overriding it. This approach allows you to use the default Tailwind CSS configuration and Shuriken UI preset at the same time.
Shuriken UI preset
- Components:
This includes a set of pre-defined utilities reusable in components likenui-focus,nui-maskandnui-mark. You can explore them on github.com - Extended colors:
Instead of hardcoding the default Tailwind CSS colors, Shuriken UI uses a set of colors that are more suitable for web applications. You can still use the default Tailwind CSS colors if you want to. Continue to colors to learn more. - Extended fonts:
More fonts are added to the default Tailwind CSS configuration so you can fine tune your typography. Continue to fonts to learn more.
Apollux plugins
In addition to tailwind plugin and shuriken ui preset, Apollux adds some plugins which you can find in layers/apollux/tailwind, like the expose-colors plugin that exposes Tailwind CSS colors in native css variables.
Useful resources:
Apollux has full typescript support for tailwind, so you can create a tailwind.config.ts file to customize your Tailwind CSS configuration in your main app layer. You can customize fonts, spacing, radius, shadows, colors and more.
Useful resources: