This week, I was setting up a Nuxt 3 application and I googled how to add tailwind to a Nuxt 3 application, I saw lots of results that almost worked. I guess the writers didn't really test what they wrote or better yet they're not developers, just technical writers (I'm not throwing shades at anyone 🤓). I decided to drop this little post so I could reference in the future and it can also help others as well.
Install Tailwind dependencies
To get started, install the tailwind dependencies
npm install -D tailwindcss@latest postcss@latest autoprefixer@latest
Generate Tailwind config file
npx tailwindcss init -p
The above command generates a tailwind.config.js
file in the root of your project.
Configuring Tailwind
Open the tailwind.config.js file in your editor and modify to match the code below.
/** @type {import('tailwindcss').Config} */
module.exports = {
content: [
"./components/**/*.{js,vue,ts}",
"./layouts/**/*.vue",
"./pages/**/*.vue",
"./plugins/**/*.{js,ts}",
"./nuxt.config.{js,ts}",
"./app.vue"
], theme: {
extend: {},
},
plugins: [],
}
Add Tailwind to Style
Add the following to a assets/css/styles.css file (Create file if it doesn't exit).
@tailwind base;
@tailwind components;
@tailwind utilities;
Update Nuxt config
Finally we update our Nuxt config to include our css in the build process and also make use of tailwind plugin in postcss (Postcss supercharges our css with JavaScript). Autoprefixer helps us write css without worrying about vendor prefixes.
// https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({
css: [
'@/assets/css/main.css',
],
postcss: {
plugins: {
tailwindcss: {},
autoprefixer: {},
},
},
})
Just like that, I was able to use tailwind with Nuxt 3. Feel free to drop comments or request modification.
Top comments (2)
Why not just use the official module? nuxt.com/modules/tailwindcss
I use it in some projects with just 3 without problems
Ty dude