Setup
Using Tailwind CSS in your Nuxt project is only one command away ✨
Installation
- Install
@nuxtjs/tailwindcss
dependency to your project:
yarn
yarn add -D @nuxtjs/tailwindcss
- Add it to your
modules
section in yournuxt.config
:
nuxt.config (Nuxt 3)
export default defineNuxtConfig({
modules: ['@nuxtjs/tailwindcss']
})
That's it! You can now use Tailwind classes in your Nuxt app ✨
Discover your color palette based on your Tailwind config with the Tailwind viewer.
Tailwind Files
When running nuxt dev
, this module will look for these files:
./assets/css/tailwind.css
./tailwind.config.{js,cjs,mjs,ts}
If they don't exist, the module will inject a basic configuration for each one so you don't have to create these files.
You can configure the paths in the module options.
If you're going to create your own Tailwind CSS file, make sure to add the @tailwind
directives for each of Tailwind’s layers.
@tailwind base;
@tailwind components;
@tailwind utilities;
Learn more about overwriting the Tailwind configuration in the Tailwind Config section.
Options
You can customize the module's behavior by using the tailwindcss
property in nuxt.config
:
nuxt.config
export default defineNuxtConfig({
tailwindcss: {
// Options
}
})
See the module options.
Table of Contents