Utility Framework UnoCSS

UnoCSS framework is a utility framework. There are many classes with a single style rule per class, not meant for any one element. For example, class=”border-blue-600”, which changes the border color to dark blue. Adopting this framework requires some effort, but it improves on the amount of code needed. Additionally, it handles design systems and theme-related variables. If you are new to CSS, the editor tooling and framework documentation can be more helpful than vanilla CSS docs, but this is hardly the fastest way to get a working site unless you want it tailor-made.

Uno takes a different approach to original tailwind and innovative WindiCSS. The readme’s recommended blog post has a diagram that explains that it scans, and generates CSS rules rather than generate, scan, and purge.

If you are new to utility frameworks, then UnoCSS is the best place to start because it offers maximum flexibility and simplicity in customization. Blind CSS generation needs to limit itself to some degree to curb excess rules leading to constrained expressivity. You can see the advantages over competitors in a short list and interactive docs. There is TailwindCSS WindiCSS compat preset to simplify the transition, but WindiCSS and UnoCSS are similar enough that some of the docs are just shared. In a way, what these tools do besides offering utilities is offer preprocessor and postprocessor-related capabilities like variables or auto prefixing. UnoCSS does not include the normalized preset by default. There is no reason not to pick UnoCSS over anything else if you’re starting fresh, including speed. UnoCSS is 148 times faster than TailwindCSS and 261 times faster than WindiCSS in 2022/07/02.

The reason why using utility classes leads to less CSS is because of the variants. The most common ones are state and screen. Another thing that saves time but is more about organizing code inside HTML is attributify mode which allows grouping of related attributes. Here is an example, note hover and dark mode variants:

1
2
3
4
5
6
7
8
9
<button 
  bg="blue-400 hover:blue-500 dark:blue-500 dark:hover:blue-600"
  text="sm white"
  font="mono light"
  p="y-2 x-4"
  border="2 rounded blue-200"
>
  Button
</button>

The media queries are short and not hard-coded (although there are no MD:y-x calls within this example), installing preprocessors for variables or a dark stylesheet. There are meta frameworks that depend on UnoCSS and the like-to-style components. It would be easier to find a TailwindCSS component framework other than the official one and use it in UnoCSS with Tailwind compat preset. Then you will have a list of classes to apply to elements like buttons which you can do using shortcuts to prevent code duplication and HTML cluttering.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
// vite.config.ts
import Unocss from 'unocss/vite'
import presetWind from '@unocss/preset-wind'

export default {
  plugins: [
    Unocss({
      presets: [presetWind()], // TailwindCSS/WindiCSS compatibility
      shortcuts: {
        // shortcuts to multiple utilities
        'btn': 'py-2 px-4 font-semibold rounded-lg shadow-md',
        'btn-green': 'text-white bg-green-500 hover:bg-green-700',
        // single utility alias
        'red': 'text-red-100'
      }
    }),
  ],
}

If you’re looking to kickstart a project, you may install a classless preset that is compatible with TailwindCSS or a basic one. Using a utility-based classless framework/reset will reduce the stylesheet file size as it will remove unused elements in production while having sensible and uniform defaults. They still look the same between browsers and look good without effort, but they can be easily overridden by adding classes to elements. Uno offers a variety of CSS resets in its package. The Tailwinds variant does the opposite of what a classless reset would do. It overrides all the default browser styles so that the h6 element looks like a p, after which you have to start styling every element because the HTML tags are only for SEO.