An Interest In:
Web News this Week
- March 20, 2024
- March 19, 2024
- March 18, 2024
- March 17, 2024
- March 16, 2024
- March 15, 2024
- March 14, 2024
Adding Tailwind to Nuxt 3
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-configexport 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.
Original Link: https://dev.to/thesameeric/adding-tailwind-to-nuxt-3-39n6
Dev To
An online community for sharing and discovering great ideas, having debates, and making friendsMore About this Source Visit Dev To