5

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

3

7 Answers 7

9

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

3
  • @AndrewP. Interesting, 3-rc3 was not available at the time I wrote this answer, I assume something may have changed the way postcss is configured during build. In theory, above set up relies on Nuxt itself very little so still should work, but I might be wrong.
    – Sam Axe
    May 29, 2022 at 4:06
  • 3
    It seems Nuxt v3 rc 13 has changed the nuxtx.config file structure slightly and it's now. postcss -> plugins -> tailwindcss, ... without being wrapped in "build" and without "postcssOptions"
    – Priit
    Nov 14, 2022 at 9:36
  • 1
    That is not valid anymore since Nuxt 3 stable doesn't support the nuxt 2 syntax anymore - but tailwind did update their. documentation, on how to setup tailwind with nuxt 3: tailwindcss.com/docs/guides/nuxtjs#3 Nov 28, 2022 at 11:06
3

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 :)

0
2
  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

1

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

For this, simply type in the console:

yarn run tailwindcss init
1

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.

2
  • 3
    Not like Tailwind3 is a big deal anyway. You can always ask to support some features ok the Windi project.
    – kissu
    Dec 18, 2021 at 8:20
  • 1
    Especially with this: twitter.com/windi_css/status/…
    – kissu
    Dec 18, 2021 at 9:08
1

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.

10
  • Thanks a lot for you answer! This question is asked a month ago when nuxt3 is in private beta, nuxt3 is support tailwindcss now.
    – DengSihan
    Oct 19, 2021 at 1:29
  • This should not be accepted answer as it's outdated, Nuxt3 supports TailwindCSS just fine.
    – Sam Axe
    Dec 27, 2021 at 17:19
  • Actually, technically Tailwind CSS isn't supported in Nuxt 3 - https://modules.nuxtjs.org/?version=3.x, however, WindiCSS is.
    – 23jjl
    Dec 28, 2021 at 21:00
  • @23johanningmeierjl, how is it not supported? I'm using it in my Nuxt3 project just fine without any issues whatsoever. You simply do not need a module for Tailwind. It simply needs to be configured in nuxt.config.js in build params.
    – Sam Axe
    Dec 30, 2021 at 1:12
  • 1
    @SamAxe, I think I have clarified. I feel that the video gives a better example of how to do it. (Personally, I'm a bit of a visual learner). I also kept the idea of Windi CSS (I have to recommend it) and UnoCSS. The benchmarks I included are also useful. I hope this is better.
    – 23jjl
    Dec 31, 2021 at 21:56
1

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

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...

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.