Using ACSS atomic CSS framework (aka Atomizer) with Nuxt

ACSS is a nice little Atomic CSS framework. In contrast to alternatives like Tailwind, it generates atomic classes from the actual class instances. This allows to 1. keep the number of generated classes at a minimum, and 2. to pass arbitrary values to the classes (which would normally lead to a big class explosion). Under the hood it uses a tool called Atomizer to generate these classes. This article describes how to use ACSS in a Nuxt app using the nuxt-atomizer module.

Using the nuxt-atomizer module

Basic usage of the module does not require configuration. We can just add it to our module list. Let's install the module by running npm install nuxt-atomizer. Then we add it to our nuxt.config.js:

export default {
  modules: [
    'nuxt-atomizer',
  },
}

The great thing about Nuxt modules is that they can abstract away a lot of logic. The whole class generation takes place inside the module, so that we can start adding classes right away 🚀.

Let's create a template and add atomic classes:

<template>
  <div class="P(2rem) Bgc(#fafafa) C(#111) Bd Bdw(2px) Bdc(#ccc) Bdrs(.5rem) Ff(ss)">
    Hey there, I'm styled with ACSS! 🙌
  </div>
</template>

That's it, the result is shown below. Feel free to experiment with the CodeSandbox. Also, check out the docs for further configuration.

Conclusion

This article showed how to use ACSS in a Nuxt app. I hope it's of some use for you! If you like the module, feel free to leave a star at star at GitHub 🌟. Thanks for reading!

If you like what I'm doing, follow me on Twitter or check out my website. Also consider donating at Buy Me a Coffee, PayPal or Patreon. Thank you so much! ❤️