Getting Started
Setup
Using Tailwind CSS in your Nuxt project is only one command away.
Installation
- Install
@nuxtjs/tailwindcss
dependency to your project:
yarn add -D @nuxtjs/tailwindcss
- Add it to your
modules
section in yournuxt.config
:
export default defineNuxtConfig({
modules: ['@nuxtjs/tailwindcss']
})
That's it! You can now use Tailwind classes in your Nuxt app ✨
For Nuxt 2.15 and lower, also add
@nuxt/postcss8
to your dependencies.Discover your color palette based on your Tailwind config with the Tailwind viewer.
Tailwind Files
When running npm run dev
, this module will look for these files:
./assets/css/tailwind.css
./tailwind.config.{js,cjs,mjs,ts}
If these files don't exist, the module will automatically generate a basic configuration for them, so you don't have to create these files manually.
You can create the tailwind.config.js
file by running the following command:
npx tailwindcss init
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 layer types (base, components, and utilities).
~/assets/css/tailwind.css
@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.ts
export default defineNuxtConfig({
tailwindcss: {
// Options
}
})
See the module options.