Create your project
Start by creating a new Nuxt project if you don’t have one set up already. The most common approach is to use the Nuxt Command Line Interface.
Terminalnpx nuxi init my-projectcd my-project
Install Tailwind CSS
Install
tailwindcss
and its peer dependencies via npm, and then run the init command to generate atailwind.config.js
file.Terminalnpm install -D tailwindcss postcss autoprefixernpx tailwindcss init
Add Tailwind to your PostCSS configuration
Add
tailwindcss
andautoprefixer
to thepostcss.plugins
object in yournuxt.config.js
file.nuxt.config.js// https://nuxt.com/docs/api/configuration/nuxt-config export default defineNuxtConfig({ devtools: { enabled: true }, postcss: { plugins: { tailwindcss: {}, autoprefixer: {}, }, }, })
Configure your template paths
Add the paths to all of your template files in your
tailwind.config.js
file.tailwind.config.js/** @type {import('tailwindcss').Config} */ module.exports = { content: [ "./components/**/*.{js,vue,ts}", "./layouts/**/*.vue", "./pages/**/*.vue", "./plugins/**/*.{js,ts}", "./app.vue", "./error.vue", ], theme: { extend: {}, }, plugins: [], }
Add the Tailwind directives to your CSS
Create an
./assets/css/main.css
file and add the@tailwind
directives for each of Tailwind’s layers.main.css@tailwind base; @tailwind components; @tailwind utilities;
Add the CSS file globally
Add your newly-created
./assets/css/main.css
to thecss
array in yournuxt.config.js
file.nuxt.config.js// https://nuxt.com/docs/api/configuration/nuxt-config export default defineNuxtConfig({ devtools: { enabled: true }, css: ['~/assets/css/main.css'], postcss: { plugins: { tailwindcss: {}, autoprefixer: {}, }, }, })
- Terminal
npm run dev
- app.vue
<template> <h1 class="text-3xl font-bold underline"> Hello world! </h1> </template>