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

DengSihan
  • 2,119
  • 1
  • 13
  • 40
  • There is probably some configuration to do with postcss too? https://tailwindcss.com/docs/installation#add-tailwind-as-a-post-css-plugin – kissu Sep 09 '21 at 08:33
  • @kissu Thanks a lot! I use the default `postcss.config.js`, but I just found it has never been ran. – DengSihan Sep 09 '21 at 08:41
  • check the official docs of tailwind css https://tailwindcss.com/docs/guides/nuxtjs – Kaartik Nayak Sep 10 '21 at 08:45

7 Answers7

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

Sam Axe
  • 437
  • 1
  • 8
  • 25
  • @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 '22 at 04:06
  • 1
    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 '22 at 09: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: https://tailwindcss.com/docs/guides/nuxtjs#3 – Irgend Son Hansel Nov 28 '22 at 11:06
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

kissu
  • 40,416
  • 14
  • 65
  • 133
odenman250
  • 130
  • 8
2

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

Irgend Son Hansel
  • 623
  • 9
  • 18
1

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

For this, simply type in the console:

yarn run tailwindcss init
Dave136
  • 36
  • 1
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.

23jjl
  • 11
  • 4
  • 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 '21 at 01:29
  • This should not be accepted answer as it's outdated, Nuxt3 supports TailwindCSS just fine. – Sam Axe Dec 27 '21 at 17:19
  • Actually, technically Tailwind CSS isn't supported in Nuxt 3 - [https://modules.nuxtjs.org/?version=3.x](https://modules.nuxtjs.org/?version=3.x), however, WindiCSS is. – 23jjl Dec 28 '21 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 '21 at 01:12
  • @SamAxe, I answered this months ago when Tailwind 3 was not out yet. The docs were old, and when following the docs on the basis for the installation with Nuxt, it yielded errors. This is because the [Nuxt Tailwind module](https://tailwindcss.nuxtjs.org/) was and still is incompatible with Nuxt 3. You can review the old docs [here](https://v2.tailwindcss.com/docs/guides/nuxtjs). I found WindiCSS as the best alternative then, and was my best answer at the time. Also, the alternative method is less-than-preferable because it doesn't work when running 'npm run dev', it only works when building. – 23jjl Dec 30 '21 at 20:49
  • @23jjl the above answer update is still not accurate, running `nuxi dev` supports hot refresh without a problem and will recompile tailwind on the fly – Sam Axe Dec 31 '21 at 01:31
  • @SamAxe, I tried it yesterday. Tailwind worked when I deployed it, however, not when I ran ```nuxi dev```. None of the styling showed up whatsoever. This is because in the ```nuxt.config.ts``` file, Post CSS is set to run when it “builds”, not when you run it using the 'dev' command. I will say it would work great with CodeSandbox, because it "builds" it when it generates the app automatically. As a VS Code (or sometime Gitpod) user, it won't work at all because it doesn't compile Tailwind when running ```nuxi dev```. Unless I'm missing something, I'm fairly sure I'm still accurate. – 23jjl Dec 31 '21 at 21:07
  • @SamAxe, you missed something in your answer. You need to add "./app.vue/" under the "content" declaration in ```tailwind.config.js``` as well as a few [other things](https://tailwindcss.com/docs/guides/nuxtjs#:~:text=Configure%20your%20template,config.js%20file.) if you want your app to be styled. Wasn't aware of that. I did not add this, when I tried it. – 23jjl Dec 31 '21 at 21:27
  • 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 '21 at 21:56
  • @23jjl good catch regards the config.js, amended my answer, thanks for pointing that out – Sam Axe Jan 01 '22 at 02:59
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.

mo3n
  • 1,522
  • 2
  • 10
  • 34
  • 3
    Not like Tailwind3 is a big deal anyway. You can always ask to support some features ok the Windi project. – kissu Dec 18 '21 at 08:20
  • 1
    Especially with this: https://twitter.com/windi_css/status/1471976797088940032?t=1iMuKCokqfSuDEFWZTUBVw&s=19 – kissu Dec 18 '21 at 09:08
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...

Marc
  • 5,109
  • 2
  • 32
  • 41