CODEWITHSUNDEEP
nuxt.jstailwind-cssunocss
DengSihan
DengSihan

Reputation: 2997

Nuxt3: how to use tailwindcss

Very first try on Nuxt3 via Nuxt3 Starter

I wonder how can I use tailwindcss in Nuxt3 Starter manually.

(Not via @nuxtjs/tailwindcss , because it's for Nuxt2, and not work with Nuxt3.)

I created a blank Nuxt3 project by

npx degit "nuxt/starter#v3" my-nuxt3-project

then, I installed the tailwindcss manually

npm install -D tailwindcss@latest postcss@latest autoprefixer@latest

nuxt.config.ts

export default {
    css: [
        '~/assets/tailwind.css',
    ]
}

assets/tailwind.css

@tailwind base;
@tailwind components;
@tailwind utilities;

but I can only get the raw code but not the compiled css: raw code but not the compiled css

How can I use tailwindcss in Nuxt3?

Any help is greatly appreciated!

online mini demo

update:

@nuxtjs/tailwindcss is already supported in Nuxt3

basic example

Upvotes: 5

Views: 5841

Answers (7)

Marc
Marc

Reputation: 5455

It is officially supported as a community nuxt 3 module: https://tailwindcss.nuxtjs.org

You can find this module listed here: https://nuxt.com/modules

All that is required is:

yarn add --dev @nuxtjs/tailwindcss

// OR

npm install --save-dev @nuxtjs/tailwindcss

nuxt.config.ts

export default defineNuxtConfig({
    modules: ['@nuxtjs/tailwindcss']
})

Thats is all, you do not need to configure content in tailwind.config.js as the module already comes pre-configured to handle components, pages, layouts etc...

How to overwrite the config

https://tailwindcss.nuxtjs.org/tailwind/config#overwriting-the-configuration

Upvotes: 1

Sam Axe
Sam Axe

Reputation: 545

Since accepted answer can mislead, as if Tailwind is not supported on Nuxt 3, here is what you need to do to make it work:

  1. Install dependancies by running npm install -D tailwindcss@latest postcss@latest autoprefixer@latest

  2. Run npx tailwindcss init to create tailwind.config.js file

  3. Configure nuxt.config.js build settings to run postcss while building:

    build: {
        postcss: {
            postcssOptions: {
                plugins: {
                    tailwindcss: {},
                    autoprefixer: {},
                },
            },
        },
}

also configure your tailwind.css file location inside nuxt.config.js by adding:

css: ["~/assets/css/tailwind.css"]
  1. Populate your tailwind.css file
@tailwind base;
@tailwind components;
@tailwind utilities;

That should be it.

Edit:

Also, make sure to include following in tailwind.config.js

content: [
    "./components/**/*.{vue,js}",
    "./layouts/**/*.vue",
    "./pages/**/*.vue",
    "./plugins/**/*.{js,ts}",
    "./nuxt.config.{js,ts}",
  ],

Edit 2:

Refer to latest documentation on Tailwind CSS website https://tailwindcss.com/docs/guides/nuxtjs#3

Upvotes: 9

Irgend Son Hansel
Irgend Son Hansel

Reputation: 751

I made a fully configured nuxt 3 "starter-kit", supporting TypeScript and several considered as useful libraries, fully configured and ready to use in real world projects: TypeScript, Tailwind CSS, Sass, Storybook, Vitest & Pinia. I just pushed it yesterday - should be ready to use...

Maybe it will help someone: https://github.com/lazercaveman/nuxt3-starter :)

Upvotes: 3

odenman250
odenman250

Reputation: 130

  1. yarn add postcss && tailwindcss

  2. Add tailwind.config.js to your directory.

  3. Update your nuxt.config.ts with:

    css: ['~/assets/styles/tailwind.css'],
build: {
    postcss: {
        postcssOptions: {
            plugins: {
                tailwindcss: {},
                autoprefixer: {}
            }
        }
    }
},

  4. Create tailwind.css in styles and add:

    @import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';

  5. yarn dev

Upvotes: 2

23jjl
23jjl

Reputation: 11

If you want to use Tailwind with Nuxt 3, you can use Windi CSS or you can follow the instructions in this video if you want to use the actual Tailwind. I would still recommend Windi CSS as it uses the same syntax as Tailwind CSS and works great with Nuxt 3, plus has a few unique features (such as the WindiCSS Analyzer). Also, Nuxt specifically sponsors the project, and it's a lot faster. Or, if you are unsatisfied with both, you could also try UnoCSS which is even faster than Windi and Tailwind (it is, however, still in beta).

You can check out the benchmarks of each CSS type here.

Upvotes: 1

mo3n
mo3n

Reputation: 1870

Using Windi CSS is great and I'm giving it a try myself, but it's only compatible with the version 2 of Tailwind CSS, and not with the new version 3. So, if you want to use Tailwind CSS v3 and it's new features within your Nuxt3 project, you can follow the instructions provided in the answer to this question.

Upvotes: 1

Dave136
Dave136

Reputation: 36

Maybe your problem is because you need a tailwindcss.config.js.

For this, simply type in the console:

yarn run tailwindcss init

Upvotes: 1

Related Questions