Installation
Install Tailwind CSS with Nuxt
Setting up Tailwind CSS in a Nuxt project.
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: {}, }, }, })
Start your build process
Run your build process with
npm run dev
.Terminalnpm run dev
Start using Tailwind in your project
Start using Tailwind’s utility classes to style your content.
app.vue<template> <h1 class="text-3xl font-bold underline"> Hello world! </h1> </template>