nuxt-modules/tailwindcss

Tailwind CSS module for Nuxt

Nuxt Tailwind

Tailwind CSS module for Nuxt ⚡️

• ✨  Release Notes
• ▶️ Play online
• 📖  Documentation

Features

• 👌  Zero configuration to start
• 🪄  Includes CSS Nesting with postcss-nesting
• 🎨  Discover your Tailwind Config & Colors (see video)
• ⚙️  Reference your Tailwind config in your app
• 📦  Extendable by Nuxt modules using hooks
• 🚀  Supports both Nuxt 3 and Nuxt 2

📖  Read more

Quick Setup

Add @nuxtjs/tailwindcss using the Nuxt CLI to your project

npx nuxi@latest module add tailwindcss

or add @nuxtjs/tailwindcss using your dependency manager

# Using pnpm
pnpm add --save-dev @nuxtjs/tailwindcss

# Using yarn
yarn add --dev @nuxtjs/tailwindcss

# Using npm
npm install --save-dev @nuxtjs/tailwindcss

and then to the modules section of nuxt.config.{ts,js}

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

That's it! You can now use Tailwind classes in your Nuxt app ✨

You can test latest additions on Nightly Releases!

📖  Read more

Contributing

You can contribute to this module online:

Or locally:

1. Clone this repository
2. Install dependencies using pnpm i
3. Prepare for development using pnpm dev:prepare
4. Start development server using pnpm dev

Docs

You can run docs/ locally by using pnpm docs:dev, or to run a build:

1. Make sure to add your Nuxt UI Pro license in the .env file before building the application.
2. Run SSG build using pnpm docs:build
3. Review the production build locally using pnpm docs:preview

Check out the deployment documentation for more information.

License

MIT - Made with 💚

tailwindcss's Issues

PurgeCSS does not purge 🤷‍♂️

My tailwind css is 1.14MB on production build! What am I doing wrong? 🤷‍♂️

command
env NODE_ENV=production yarn build --analyze

tailwind.css

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


body {
  @apply bg-gray-100;
}

input:focus {
  @apply outline-none;
}

.link {
  @apply text-green-700 cursor-pointer;
}

.btn {
  @apply py-3 px-8 text-base border border-gray-300 rounded;
}
.btn-primary {
  @apply text-white bg-blue-700 border-none;
}
.btn-primary:hover {
  @apply bg-blue-800;
}

.btn:focus {
  @apply outline-none shadow-inner;
}

nuxt.config.js

import pkg from './package'

export default {
  mode: 'spa',

  /*
  ** Headers of the page
  */
  head: {
    title: pkg.name,
    meta: [
      { charset: 'utf-8' },
      { name: 'viewport', content: 'width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0, minimal-ui' },
      { hid: 'description', name: 'description', content: pkg.description }
    ],
    link: [
      { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }
    ]
  },

  /*
  ** Customize the progress-bar color
  */
  loading: { color: '#fff' },

  /*
  ** Global CSS
  */
  css: [
  ],

  /*
  ** Plugins to load before mounting the App
  */
  plugins: [
  ],

  /*
  ** Nuxt.js modules
  */
  modules: [
    '@nuxtjs/axios'
  ],
  
  /*
  ** Nuxt.js dev-modules
  */
  buildModules: [
    '@nuxtjs/tailwindcss'
  ],

  /*
  ** Build configuration
  */
  build: {
    extend: (config, ctx) => {
      const svgRule = config.module.rules.find(rule => rule.test.test('.svg'))

      svgRule.test = /\.(png|jpe?g|gif|webp)$/

      config.module.rules.push({
        test: /\.svg$/,
        loader: 'vue-svg-loader',
        options: {
          svgo: {
            plugins: [
              { cleanupListOfValues: true },
              { removeDimensions: true }
            ]
          }
        }
      })

      // Run ESLint on save
      /* if (ctx.isDev && ctx.isClient) {
        config.module.rules.push({
          enforce: 'pre',
          test: /\.(js|vue)$/,
          loader: 'eslint-loader',
          exclude: /(node_modules)/
        })
      } */
    }
  }
}

package.json

{
  "name": "url-prevuer",
  "version": "1.0.0",
  "description": "Preview given urls",
  "author": "Grzegorz Leoniec",
  "private": true,
  "scripts": {
    "dev": "nuxt",
    "build": "nuxt build",
    "start": "nuxt start",
    "generate": "nuxt generate",
    "lint": "eslint --ext .js,.vue --ignore-path .gitignore .",
    "precommit": "npm run lint",
    "test": "jest"
  },
  "dependencies": {
    "@nuxtjs/axios": "^5.6.0",
    "@nuxtjs/tailwindcss": "^1.1.2",
    "cross-env": "^6.0.3",
    "nuxt": "^2.10.1"
  },
  "devDependencies": {
    "@nuxtjs/eslint-config": "^1.1.2",
    "@vue/test-utils": "^1.0.0-beta.29",
    "autoprefixer": "^9.6.5",
    "babel-core": "7.0.0-bridge.0",
    "babel-eslint": "^10.0.3",
    "babel-jest": "^24.9.0",
    "eslint": "^6.5.1",
    "eslint-config-standard": ">=14.1.0",
    "eslint-loader": "^3.0.2",
    "eslint-plugin-import": ">=2.18.2",
    "eslint-plugin-jest": ">=22.19.0",
    "eslint-plugin-node": ">=10.0.0",
    "eslint-plugin-nuxt": ">=0.4.3",
    "eslint-plugin-promise": ">=4.2.1",
    "eslint-plugin-standard": ">=4.0.1",
    "eslint-plugin-vue": "^5.2.3",
    "jest": "^24.9.0",
    "nodemon": "^1.19.4",
    "prettier": "^1.18.2",
    "vue-jest": "^3.0.5",
    "vue-svg-loader": "^0.12.0"
  }
}

Responsive styles don't work (sm:, md:, lg:..)

Usual Tailwind CSS styles is working fine, but styles started with responsive prefix (sm:, md:, lg:) doesn't work for some reason.

Also, when I try to add a custom prefixes to the variants section of tailwind.config.js:

module.exports = {
  theme: {},
  variants: {
    border: ['first'],
  },
  plugins: [],
}

I have no success - new variants does not work.

I have basic config from Nuxt project generator with Tailwind option enabled.
@nuxtjs/tailwindcss@^1.3.2 version is installed now.

export default {
    mode: 'universal',
    head: {
    title: process.env.npm_package_name || '',
    meta: [
        { charset: 'utf-8' },
        { name: 'viewport', content: 'width=device-width, initial-scale=1' },
        { hid: 'description', name: 'description', content: process.env.npm_package_description || '' }
    ],
    link: [
        { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }
    ]
    },
    loading: { color: '#fff' },
    css: [
    ],
    plugins: [],
    buildModules: [
        // Doc: https://github.com/nuxt-community/nuxt-tailwindcss
        '@nuxtjs/tailwindcss',
        '@nuxtjs/moment',
    ],
    modules: [
        // Doc: https://axios.nuxtjs.org/usage
        '@nuxtjs/axios',
        '@nuxtjs/pwa',
        // Doc: https://github.com/nuxt-community/dotenv-module
        '@nuxtjs/dotenv',
    ],
}

[Css conflicted] How to work fine with vuetify?

Hi.
purgeCSS: {
whitelistPatterns: [/^v-/, /^theme-/, /^application--/],
whitelistPatternsChildren: [/^v-/, /^theme-/, /^application--/],
whitelist: ['spacer', 'primary', 'secondary', 'accent', 'error', 'warning', 'info', 'success']
},
It's not working when build production

npm run build
npm run start
css will conflict
Could you help me?
@EryouHao

tailwind-transitions: transitionDuration "default" delays route/title change

Belongs to nuxt. Issue can be found here:
nuxt/nuxt#6330

Nested css class won't work

Hi there,

thanks for your extraordinary work with nuxt (and all the other stuff :D)

I've encountered this very strange issue.
In all my css files nested class won't work.
I didn't change anything from the default conf.

Anyone knows why?

Thank you guys!

Custom theme don't works

I created an app with create-nuxt-app, i added tailwindcss, but modification are not applied..

module.exports = {
  theme: {
    theme: {
      fontFamily: {
        display: ["Arial", "Poppins", "Raleway"],
        body: ["Muli", "Open Sans"]
      }
    }
  },
  variants: {},
  plugins: []
};

how to config tailwindcss with element UI (https://github.com/ElemeFE/element)

Run Codecov on PRs

How can I use with tsx|jsx ?

On production build, when i use with tsx is not build class on tsx.

Better handle of template `tailwind.css` file write location

Assuming https://nuxtjs.org/api/configuration-dir, user could have custom assets directory name, so we need to take this into account.

First step is to use this.options.dir.assets to get the right assets folder.
Then we need to add a module option so user can customize which folder in his assets folder is the one where he stores css (could be assets/css, assets/styles or even assets/xxx where user alrady have some css files)

It should end up in something like

path.join('@', this.options.dir.assets, moduleOptions.OPTION_NAME || 'css', 'tailwind.css')

prefix option is not working

I tried to enable prefix option from tailwind.config.js, but it didn't work.

hide postcss-preset-env stage information

if i run nuxt dev it will show the following information:

postcss-preset-env stage is set to 1 for supporting advanced css features

is it possible to hide this? I think our developers don't need to see this information every time.

Support for tailwindUI?

Thanks to the nuxt community for this repo.

I am facing an issue, however - has it been tested with and does it support tailwindUI?
https://tailwindui.com/documentation#getting-set-up

TailwindUI requires changes to the postcss config:
https://tailwindui.com/documentation#update-your-purgecss-configuration

But changes to the postcss config are deprecated by nuxt: https://nuxtjs.org/faq/postcss-plugins/
So I'm confused as to how to make changes to a postcss config with nuxt. Is there an example of how to configure tailwindUI with nuxt? Thanks in advance..

Explain on Readme.md file this module is the same as choosing tailwindcss when using npx create-nuxt-app

Maybe it's a stupid comment. But I thought for like an hour that somehow this repo was something different than what i previously had by setting up a tailwindcss app using npx create-nuxt-app You could just add a big line somewhere on the readme.md file clarifying that.

Documentation request in readme for lang="postcss"

Will you please specify in the usage section that in order to use the @apply directive in pages / components you will need to set the lang="postcss"

<style lang="postcss">
  .h1 {
    @apply text-5xl text-green-600 font-semibold;
  }
</style>

Otherwise, the directive will not work. Thank you!

Add more info for the purgeCSS part

Hi,
Thanks for this great module.

If I'm right, we need to install nuxt-purgecss in addition to tailwindcss module.
Maybe it should be indicated in the documentation.

I'd also like to know what is the default purgecss configuration and if I can tweak it like I would do when installing tailwind css and nuxt-purgecss.

Thanks in advance.

Edit: I was wrong, it seems it works well out of the box ;)

how to enable and add autoprefixer?

i need to add prefix but idk how enable or add PostCSS plugins to this config

[Regression Bug] - PurgeCSS stopped working after upgrade to v.1.3.0

Repro Link: https://codesandbox.io/s/happy-dijkstra-1ng86
How to reproduce:

• Create basic nuxt project
• add @nuxtjs/tailwind v.1.3.0
• yarn build

Actual Result:

• PurgeCSS is broken. app.js file size - 740kb.

Expected Result:

• PurgeCSS is working. app.js file size - 1kb.

Works as expected in 1.2.0

After assembling the project in production mode, my styles disappear (version 1.3.1)

My config:

require('dotenv').config();

module.exports = {
  head: {
    meta: [
      { charset: 'utf-8' },
      { name: 'viewport', content: 'width=device-width, initial-scale=1' },
      { hid: 'description', name: 'description', content: '' },
    ],
    link: [
      {rel: 'stylesheet', href: 'https://fonts.googleapis.com/css?family=Montserrat:400,600,700&display=swap'}
    ],
  },

  css: [
    '~/assets/scss/common.scss',
    '~/assets/scss/3rd-party/font-awesome/font-awesome.scss',
  ],

  modules: [
    'nuxt-leaflet',
    '@nuxtjs/axios',
    '@nuxtjs/auth',
    '@nuxtjs/toast',
    ['@nuxtjs/router', {keepDefaultRouter: true, fileName: './routes'}],
  ],

  buildModules: [
    '@nuxtjs/tailwindcss'
  ],

  /*
    Modules.
   */
  auth: {
    strategies: {
      local: {
        endpoints: {
          login: { url: `${process.env.API_URL}/api/users/login`, method: 'post', propertyName: 'token' },
          logout: { url: `${process.env.API_URL}/api/users/logout`, method: 'post' },
          user: { url: `${process.env.API_URL}/api/users/me`, method: 'post', propertyName: false },
        },
      }
    }
  },

  toast: {
    duration: 3000,
  },

  build: {
    extractCSS: true,
  },
};

Styles from files do not get into the assembly for some reason
(assets/scss/common.scss, assets/scss/3rd-party/font-awesome/font-awesome.scss)

In dev mode:

In prod mode: (nuxt build && nuxt start)

Sorry for my English 😢

PurgeCSS Whitelist doesn't seem to work with regex

On other non-nuxt webpack projects we've used Regular Expressions for our Purge, egin a postcss.config.js file:

purgecss({
  ...
  whitelistPatterns: [
    /lazyloaded/,
    /lazyload/,
  ...

Which does work. It's possible I'm doing something wrong, but if I try a regex on nuxt-tailwincss

Then...

purgeCSS: {
	whitelist: [
		// Doesn't work:
		/icon/,
		// Does work:
		'icon',
	],
},

Regex matching would be useful. Part of the reason you have whitelist in Purge will be for some programmatically generated classes, possibly looping through config, where you just want to whitelist to a pattern rather than explicit class names.

Thanks!

Theme extend in tailwind config file renders syntax error

Hi,

When extending the theme for spacing for instance, Nuxt.js render a syntax error (pointing spacing in my config file below).

Could you please check if this is a bug?

No problem if I totally override the default theme.

My tailwind.config.js file below following tailwind documentation:

module.exports = {
  theme: {
      extend: {
        spacing: {
            'test': '24rem'
        }
      },
  },
  variants: {},
  plugins: []
}

Thank you.
Best regards,
Sebastien

Error when adding @tailwindcss/ui plugin

I am encountering an issue when using @tailwindcss/ui plugin. I followed the instructions, adding the plugin in tailwind.config.js:

module.exports = {
   ...
   plugins: [
        require('@tailwindcss/ui'),
    ]
}

But when running nuxt generate, I get this error:

ERROR in ./app/assets/css/tailwind.css (./node_modules/css-loader/dist/cjs.js??ref--3-oneOf-1-1!./node_modules/postcss-loader/src??ref--3-oneOf-1-2!./app/assets/css/tailwind.css)
Module build failed (from ./node_modules/postcss-loader/src/index.js):
Error: Expected an opening square bracket.
    at /Users/valentinprugnaud/Sites/Speakbox/speakbox-web-app/node_modules/tailwindcss/utilities.css:1:1
    at Root._error (/Users/valentinprugnaud/Sites/Speakbox/speakbox-web-app/node_modules/postcss-minify-selectors/node_modules/postcss-selector-parser/dist/parser.js:137:24)
    at Root.error (/Users/valentinprugnaud/Sites/Speakbox/speakbox-web-app/node_modules/postcss-minify-selectors/node_modules/postcss-selector-parser/dist/selectors/root.js:43:25)
    at Parser.error (/Users/valentinprugnaud/Sites/Speakbox/speakbox-web-app/node_modules/postcss-minify-selectors/node_modules/postcss-selector-parser/dist/parser.js:392:25)
    at Parser.expected (/Users/valentinprugnaud/Sites/Speakbox/speakbox-web-app/node_modules/postcss-minify-selectors/node_modules/postcss-selector-parser/dist/parser.js:685:25)
    at Parser.missingSquareBracket (/Users/valentinprugnaud/Sites/Speakbox/speakbox-web-app/node_modules/postcss-minify-selectors/node_modules/postcss-selector-parser/dist/parser.js:406:21)
    at Parser.parse (/Users/valentinprugnaud/Sites/Speakbox/speakbox-web-app/node_modules/postcss-minify-selectors/node_modules/postcss-selector-parser/dist/parser.js:668:22)
    at Parser.loop (/Users/valentinprugnaud/Sites/Speakbox/speakbox-web-app/node_modules/postcss-minify-selectors/node_modules/postcss-selector-parser/dist/parser.js:618:18)
    at new Parser (/Users/valentinprugnaud/Sites/Speakbox/speakbox-web-app/node_modules/postcss-minify-selectors/node_modules/postcss-selector-parser/dist/parser.js:129:14)
    at Processor._root (/Users/valentinprugnaud/Sites/Speakbox/speakbox-web-app/node_modules/postcss-minify-selectors/node_modules/postcss-selector-parser/dist/processor.js:47:22)
    at Processor._runSync (/Users/valentinprugnaud/Sites/Speakbox/speakbox-web-app/node_modules/postcss-minify-selectors/node_modules/postcss-selector-parser/dist/processor.js:83:25)
    at Processor.processSync (/Users/valentinprugnaud/Sites/Speakbox/speakbox-web-app/node_modules/postcss-minify-selectors/node_modules/postcss-selector-parser/dist/processor.js:177:27)
    at getParsed (/Users/valentinprugnaud/Sites/Speakbox/speakbox-web-app/node_modules/postcss-minify-selectors/dist/index.js:34:59)
    at /Users/valentinprugnaud/Sites/Speakbox/speakbox-web-app/node_modules/postcss-minify-selectors/dist/index.js:196:39
    at /Users/valentinprugnaud/Sites/Speakbox/speakbox-web-app/node_modules/postcss/lib/container.js:239:18
    at /Users/valentinprugnaud/Sites/Speakbox/speakbox-web-app/node_modules/postcss/lib/container.js:135:18
    at AtRule.each (/Users/valentinprugnaud/Sites/Speakbox/speakbox-web-app/node_modules/postcss/lib/container.js:101:16)
 @ ./app/assets/css/tailwind.css 4:14-172
 @ ./.nuxt/App.js
 @ ./.nuxt/index.js
 @ ./.nuxt/client.js
 @ multi ./.nuxt/client.js

Should @apply work?

When I try to use @apply in my main.scss file, I get an error

@apply cannot be used with .hover\:bg-blue-700 because .hover\:bg-blue-700 either cannot be found, or its actual definition includes a pseudo-selector like :hover, :active, etc. If you're sure that .hover\:bg-blue-700 exists, make sure that any @import statements are being properly processed before Tailwind CSS sees your CSS, as @apply can only be used for classes in the same CSS tree.

This is in nuxt.config.js

css: [
    '~assets/css/main.scss',
    '~assets/css/fonts.css'
  ],
  buildModules: [
    '@nuxtjs/tailwindcss'
  ],

I've also tried that css config array with tailwind.css at the start and end. Neither works.

assets/css/tailwind.css exists

/* purgecss start ignore */
@import 'tailwindcss/base';
@import 'tailwindcss/components';
/* purgecss end ignore */
@import 'tailwindcss/utilities';

Tailwind does work if I reference classes directly in my templates and pages, but that's an uglier solution (which could be lessened by components, but still less pleasing than having everything referred to from SCSS files.

Curious if there's any way to make this work. Thank you.

Error When Adding Default tailwind.config.js from Tailwind Repo

I'm creating a new nuxt project with nuxt/tailwindcss and everything works fine when the tailwind.config.js file is empty. When I added the provided tailwind.config.js found here https://github.com/tailwindcss/tailwindcss/blob/master/stubs/defaultConfig.stub.js I get 2 errors

 ERROR  Failed to compile with 2 errors


 ERROR  in ./assets/css/tailwind.css

Module build failed (from ./node_modules/postcss-loader/src/index.js):
TypeError: breakpoints is not a function
    at Object.maxWidth (/Users/Nicholas/Coding/my-blog/tailwind.config.js:337:12)
    at Object.keys.reduce (/Users/Nicholas/Coding/my-blog/node_modules/tailwindcss/lib/util/resolveConfig.js:68:65)
    at Array.reduce (<anonymous>)
    at resolveFunctionKeys (/Users/Nicholas/Coding/my-blog/node_modules/tailwindcss/lib/util/resolveConfig.js:66:30)
    at resolveConfig (/Users/Nicholas/Coding/my-blog/node_modules/tailwindcss/lib/util/resolveConfig.js:75:12)
    at /Users/Nicholas/Coding/my-blog/node_modules/tailwindcss/lib/index.js:67:37
    at /Users/Nicholas/Coding/my-blog/node_modules/tailwindcss/lib/processTailwindFeatures.js:32:20
    at LazyResult.run (/Users/Nicholas/Coding/my-blog/node_modules/postcss/lib/lazy-result.js:295:14)
    at LazyResult.asyncTick (/Users/Nicholas/Coding/my-blog/node_modules/postcss/lib/lazy-result.js:208:26)
    at LazyResult.asyncTick (/Users/Nicholas/Coding/my-blog/node_modules/postcss/lib/lazy-result.js:221:14)
    at LazyResult.asyncTick (/Users/Nicholas/Coding/my-blog/node_modules/postcss/lib/lazy-result.js:221:14)
    at /Users/Nicholas/Coding/my-blog/node_modules/postcss/lib/lazy-result.js:213:17

 @ ./assets/css/tailwind.css 4:14-166 14:3-18:5 15:22-174
 @ ./.nuxt/App.js
 @ ./.nuxt/index.js
 @ ./.nuxt/client.js
 @ multi eventsource-polyfill webpack-hot-middleware/client?reload=true&timeout=30000&ansiColors=&overlayStyles=&name=client&path=/__webpack_hmr/client ./.nuxt/client.js


 ERROR  in ./pages/index.vue?vue&type=style&index=0&lang=css&

Module build failed (from ./node_modules/postcss-loader/src/index.js):
TypeError: breakpoints is not a function
    at Object.maxWidth (/Users/Nicholas/Coding/my-blog/tailwind.config.js:337:12)
    at Object.keys.reduce (/Users/Nicholas/Coding/my-blog/node_modules/tailwindcss/lib/util/resolveConfig.js:68:65)
    at Array.reduce (<anonymous>)
    at resolveFunctionKeys (/Users/Nicholas/Coding/my-blog/node_modules/tailwindcss/lib/util/resolveConfig.js:66:30)
    at resolveConfig (/Users/Nicholas/Coding/my-blog/node_modules/tailwindcss/lib/util/resolveConfig.js:75:12)
    at /Users/Nicholas/Coding/my-blog/node_modules/tailwindcss/lib/index.js:67:37
    at /Users/Nicholas/Coding/my-blog/node_modules/tailwindcss/lib/processTailwindFeatures.js:32:20
    at LazyResult.run (/Users/Nicholas/Coding/my-blog/node_modules/postcss/lib/lazy-result.js:295:14)
    at LazyResult.asyncTick (/Users/Nicholas/Coding/my-blog/node_modules/postcss/lib/lazy-result.js:208:26)
    at LazyResult.asyncTick (/Users/Nicholas/Coding/my-blog/node_modules/postcss/lib/lazy-result.js:221:14)
    at LazyResult.asyncTick (/Users/Nicholas/Coding/my-blog/node_modules/postcss/lib/lazy-result.js:221:14)
    at /Users/Nicholas/Coding/my-blog/node_modules/postcss/lib/lazy-result.js:213:17
    at process._tickCallback (internal/process/next_tick.js:68:7)

 @ ./node_modules/vue-style-loader??ref--3-oneOf-1-0!./node_modules/css-loader/dist/cjs.js??ref--3-oneOf-1-1!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/src??ref--3-oneOf-1-2!./node_modules/vue-loader/lib??vue-loader-options!./pages/index.vue?vue&type=style&index=0&lang=css& 4:14-308 14:3-18:5 15:22-316
 @ ./pages/index.vue?vue&type=style&index=0&lang=css&
 @ ./pages/index.vue
 @ ./.nuxt/router.js
 @ ./.nuxt/index.js
 @ ./.nuxt/client.js
 @ multi eventsource-polyfill webpack-hot-middleware/client?reload=true&timeout=30000&ansiColors=&overlayStyles=&name=client&path=/__webpack_hmr/client ./.nuxt/client.js

Not sure if this error is related to the new commit to the file found here tailwindlabs/tailwindcss@52a1597 or if the error is on my end.

Here is my nuxt.config.js file

const glob = require("glob");
const path = require("path");
let files = glob.sync("**/*.md", { cwd: "articles" });

export default {
  mode: "universal",
  /*
   ** Headers of the page
   */
  head: {
    title: process.env.npm_package_name || "",
    meta: [
      { charset: "utf-8" },
      { name: "viewport", content: "width=device-width, initial-scale=1" },
      {
        hid: "description",
        name: "description",
        content: process.env.npm_package_description || ""
      }
    ],
    link: [{ rel: "icon", type: "image/x-icon", href: "/favicon.ico" }]
  },
  /*
   ** Customize the progress-bar color
   */
  loading: { color: "#fff" },
  /*
   ** Global CSS
   */
  css: [],
  /*
   ** Plugins to load before mounting the App
   */
  plugins: [],
  /*
   ** Nuxt.js dev-modules
   */
  buildModules: ["@nuxtjs/tailwindcss"],
  /*
   ** Nuxt.js modules
   */
  modules: [],
  /*
   ** Build configuration
   */
  build: {
    extend(config, ctx) {
      config.module.rules.push({
        test: /\.md$/,
        include: path.resolve(__dirname, "content"),
        loader: "frontmatter-markdown-loader"
      });
    },
    generate: {
      routes: function() {
        return files.map(getSlugs);
      }
    }
  }
  /*
   ** You can extend webpack config here
   */
};

edit: When I remove the changes from the commit it works just fine. Not sure if the problem is here or on tailwind.

Removes `vue-google-maps` when using `nuxt`

When using with https://github.com/xkjyeah/vue-google-maps the map does not render. Disabling purgeCSS solves the issue, but I want help understanding why it happens and if tere's a configuration I need to use.

Granted is a bit of a weird situation, but seems the purgeCSS removes everything from vue-google-maps.

In order to make vue-google-maps work I need to transpile using the following entry in the build.extend() of nuxt.config.js

transpile: [/^vue2-google-maps($|\/)/]

tailwind.config.js file created but ignored

Changes to the tailwind.config.js file do not seem to be applied, even after restarting dev server (using 1.1.2). Here are the contents of my config:

module.exports = {
  theme: {},
  variants: { 
    backgroundColor: ['responsive', 'hover', 'focus', 'group-hover'],
    visiblility:  ['responsive', 'hover', 'focus', 'group-hover'],
    cursor: ['responsive', 'hover', 'focus', 'group-hover'],
    display: ['responsive', 'hover', 'focus', 'group-hover'],
  },
  plugins: [],
  screens: {
    xs: '380px',
    sm: '640px',
    md: '768px',
    lg: '1024px',
    xl: '1280px'
  },
}

tailwind module creates a tilde folder

If the file does not exist with the resolved alias, the module will create a folder named ~

Styles and sizes are breaking on "npm generate".

Styles and sizes are breaking on "npm generate". It serves up the pages fine in local "npm run dev".

Is there a workaround/solution? Or possibility something wrong with the build process inside this module??

Tailwind CSS styles not globally accessible

ISSUE: Tailwind CSS styles not globally accessible

I installed this plugin via the nuxt-create-app CLI.
When trying to use tailwind classes within my .vue files, the styles are not being applied.

The tailwind.css file is located inside: assets/css/tailwind.css
I did not touch the contents:

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

I read through the docs multiple times, but I can't figure out what's wrong...

Here are my package.json dependencies:

  "dependencies": {
    "cross-env": "^5.2.0",
    "express": "^4.16.4",
    "@nuxtjs/axios": "^5.3.6",
    "@nuxtjs/pwa": "^2.6.0",
    "nuxt": "^2.0.0"
  },
  "devDependencies": {
    "@nuxtjs/tailwindcss": "^1.0.0",
    "nodemon": "^1.18.9"
  }

Here is my nuxt.config.js:

module.exports = {
  mode: 'universal',
  /*
  ** Headers of the page
  */
  head: {
    title: process.env.npm_package_name || '',
    meta: [
      { charset: 'utf-8' },
      { name: 'viewport', content: 'width=device-width, initial-scale=1' },
      { hid: 'description', name: 'description', content: process.env.npm_package_description || '' }
    ],
    link: [
      { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' },
      // { rel: 'stylesheet', href: '/css/tailwind.css' },
      // { rel: 'stylesheet', href: '/css/main.css' },
    ]
  },
  /*
  ** Customize the progress-bar color
  */
  loading: { color: '#fff' },
  /*
  ** Global CSS
  */
  css: [
      '@/assets/css/main.css'
  ],
  /*
  ** Plugins to load before mounting the App
  */
  plugins: [
  ],
  /*
  ** Nuxt.js dev-modules
  */
  devModules: [
    // Doc: https://github.com/nuxt-community/nuxt-tailwindcss
    '@nuxtjs/tailwindcss',
  ],
  /*
  ** Nuxt.js modules
  */
  modules: [
    // Doc: https://axios.nuxtjs.org/usage
    '@nuxtjs/axios',
    '@nuxtjs/pwa',
  ],
  /*
  ** Axios module configuration
  ** See https://axios.nuxtjs.org/options
  */
  axios: {
  },
  /*
  ** Build configuration
  */
  build: {
    /*
    ** You can extend webpack config here
    */
    extend(config, ctx) {
    }
  }
}

Thanks in advance.

PostCSS plugin is not assigned when PostCSS plugins is typeof Array

I am getting an error, because previously in my Nuxt.js project (scaffolded with create-nuxt-app) I have build.postcss which type is Array. I googled a little and found out that this syntax is deprecated, and you should use object notation instead, like stated in docs.

I skimmed through module.js and found the following line of code:

https://github.com/nuxt-community/nuxt-tailwindcss/blob/004fc2d755eeac9194c0441c51e076be8bda71fb/lib/module.js#L34

I think it would be nice if you can support deprecated syntax, so users do not get sneaky errors.

[Feature request] option to custom tailwind config path

Provide an option to customize the tailwind config path, for example ~/config/tailwind.js instead of ~/tailwind.config.js.

On Windows, cssPath is causing problems

This is why my this.options.css array looks like after the build hook:

[
  '~/assets/style/app.styl',
  'material-design-icons-iconfont/dist/material-design-icons.css',
  'vuetify/dist/vuetify.css',
  'C:\\Users\\martin\\git\\sicon\\apps\\siconBase\\assets\\css\\tailwind.css'
]

I also tried to remove the alias resolver in my test, but this did not help.
The way how tailwind is loaded via the module, does not work for me.
On Linux it works.

Cannot find module '@nuxtjs/tailwindcss' - Deploy on Laravel Forge

Hi,

I'm trying to deploy my nuxt.js app on Laravel Forge and get the following error:

Cannot find module '@nuxtjs/tailwindcss'

It's working well on my local machine.

Any idea what I'm missing?

Thank you.
Best regards,
Sebastien

How to work fine with vuetify

I want to use tailwindcss + vuetify in nuxt, but the nuxt-tailwindcss will remove some vuetify class when build.

Can you help me?

CSS Not working properly for statically generated site.

I have a nuxt webpage that uses tailwind and vue2-leaflet.

Everything looks fine in development mode (npm run dev)

However, when I create a static site (npm run generate) and view the dist folder on a local server, the leaflet map doesn't look correct. The map isn't loading properly and the markers are spilling out of the map.

If I remove tailwind, and re-run npm run generate and view the dist folder (the styling doesn't look great) but the map is displayed properly.

If anyone knows how to fix this, I would appreciate your help.

PS I chose tailwind as part on the nuxt project installation process.

And I have the following value in nuxt.config.js

devModules: [ // Doc: https://github.com/nuxt-community/nuxt-tailwindcss '@nuxtjs/tailwindcss', ],

Run CircleCI on PRs

How to integrate postcss plugin after tailwindcss

I am using the @nuxtjs/tailwindcss package in the nuxtjs project and I wanted to add to the postCSS plugin also px-to-rem plugin (https://github.com/cuth/postcss-pxtorem). I can't correctly setup the order of the postCSS plugins in nuxt.config.js.

My setup of nuxt.config.js:

build: {
    postcss: {
      plugins: {
        'postcss-pxtorem': {
          propList: [
            '*',
            '!clip-path',
            '!letter-spacing',
            '!border*',
            '!background-image'
          ]
        }
      }
    },
...
}

This works on all code written directly in components style section:

<style lang="postcss">
.test {
  padding-left: 50px;
  border-width: 10px;
}
</style>

so this will be change to

.test {
  padding-left: 3.125rem;
  border-width: 10px;
}

But it doesn't work on properties coming from tailwind and px used in tailwind.config.js

I guess the tailwind is loaded after the postCSS plugin, but I wasn't able to load px-to-rem plugin after tailwind

purgeCSS not working in development

The installation of purgeCSS works fine, but it doesn't purge in development.
However, when running nuxt generate, purgeCSS does run.

This creates a very unpleasant experience, because some classes are added dinamicaly, and there's no way to detect if they will be purged or not until after development.

It would be nice to:

• Have option to disable purgeCSS
• Apply purgeCSS during development

Reproduce:

Run create-nuxt-app with "tailwind" module, then create a component that applies a class dinamicaly, like:

<div :class="`m-${size}`"/>

Then run nuxt generate, the class won't be applied.

Error while compiling with DefaultConfig

Here is what i've done to remove the error. Remove the following line from defaultconfig file.

https://github.com/tailwindcss/tailwindcss/blob/master/stubs/defaultConfig.stub.js

...breakpoints(theme('screens')),

ERROR  Failed to compile with 2 errors                                                                                                                                                                         friendly-errors 23:38:05


 ERROR  in ./assets/css/tailwind.css                                                                                                                                                                            friendly-errors 23:38:05

Module build failed (from ./node_modules/postcss-loader/src/index.js):                                                                                                                                          friendly-errors 23:38:05
TypeError: breakpoints is not a function

Integration with Storybook

I'm planning to use this module in my project alongside with Storybook, it's working perfectly fine but it's not working in storybook environment, is there anything that I missed, or should I create postcss config? since it's different from the older version of tailwindcss

using:
@nuxtjs/tailwindcss": "^1.0.0
@storybook/vue": "^5.3.17

thank you!

tailwindcss and element are conflict when build deploy( npm run build -> npm run start --> not working)

import error when editing tailwind.css

I wanted to create a new nuxt (2.12.1) project, with tailwind, either
(1) with the create-nuxt-app
(2) with installing tailwind module with npm after choosing None during initial use of create-nuxt-app and following the set up instructions in the readme.

Then, when I add anything to the initial tailwind.css

@import "tailwindcss/base";

body {
  @apply bg-black;
  // or:
  //  background-color: black;
}

@import "tailwindcss/components";
@import "tailwindcss/utilities";

I will get two warnings:

Module Warning (from ./node_modules/postcss-loader/src/index.js):     friendly-errors 15:01:12
Warning

(10:1) @import must precede all other statements (besides @charset)
                                                                      friendly-errors 15:01:12
 @ ./assets/css/tailwind.css 4:14-166 14:3-18:5 15:22-174
 @ ./.nuxt/App.js
 @ ./.nuxt/index.js
 @ ./.nuxt/client.js
 @ multi eventsource-polyfill webpack-hot-middleware/client?reload=true&timeout=30000&ansiColors=&overlayStyles=&name=client&path=/__webpack_hmr/client ./.nuxt/client.js

and

Module Warning (from ./node_modules/postcss-loader/src/index.js):     friendly-errors 15:01:12
Warning

(8:1) @import must precede all other statements (besides @charset)
                                                                      friendly-errors 15:01:12
 @ ./assets/css/tailwind.css 4:14-166 14:3-18:5 15:22-174
 @ ./.nuxt/App.js
 @ ./.nuxt/index.js
 @ ./.nuxt/client.js
 @ multi eventsource-polyfill webpack-hot-middleware/client?reload=true&timeout=30000&ansiColors=&overlayStyles=&name=client&path=/__webpack_hmr/client ./.nuxt/client.js
                                                                      friendly-errors 15:01:12

Whereas the styling works as expected, I would expect there to be no warnings.

Load on specific pages instead of globally

I don't see an option or instructions for this. Any best practice recommendations?

Class with "." in dev visible and production removed

This is example of how to reproduce in tailwind.config.js :

  fontSize: {
    '2.7xl': '1.75rem',
    '3.2xl': '2rem',
    '5.5xl': '3.5rem',
  },

Show when running "dev", in SSR mode (production) removed.
This need to fix by:

• error in dev mode to show that don't work
• fix in production mode by proper escape

Feature Request: expose resolved Tailwind config within app

I'm having a hard tie trying to access my Tailwind config in Nuxt in order to reference the breakpoints (screens) config (related issue).

It would be great if this module was able to provide the resolved config to avoid this issue.

PurgeCSS breaks on BEM like class names

I have problem with element-ui and purgecss. Dev mode works fine. and element-ui styles breaks after build.. any help?

npm run build "PurgeCSS is not enabled because you are in dev mode"

I created a nuxt app with npx create-nuxt-app <project-name>. I choosed tailwind as the css framework. Here is my default nuxt.config.js

export default {
  mode: 'universal',
  /*
  ** Headers of the page
  */
  head: {
    title: process.env.npm_package_name || '',
    meta: [
      { charset: 'utf-8' },
      { name: 'viewport', content: 'width=device-width, initial-scale=1' },
      { hid: 'description', name: 'description', content: process.env.npm_package_description || '' }
    ],
    link: [
      { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }
    ]
  },
  /*
  ** Customize the progress-bar color
  */
  loading: { color: '#fff' },
  /*
  ** Global CSS
  */
  css: [
  ],
  /*
  ** Plugins to load before mounting the App
  */
  plugins: [
  ],
  /*
  ** Nuxt.js dev-modules
  */
  buildModules: [
    // Doc: https://github.com/nuxt-community/nuxt-tailwindcss
    '@nuxtjs/tailwindcss',
  ],
  /*
  ** Nuxt.js modules
  */
  modules: [
    // Doc: https://axios.nuxtjs.org/usage
    '@nuxtjs/axios',
  ],
  /*
  ** Axios module configuration
  ** See https://axios.nuxtjs.org/options
  */
  axios: {
  },
  /*
  ** Build configuration
  */
  build: {
    /*
    ** You can extend webpack config here
    */
    extend (config, ctx) {
    }
  }
}

If I used npm run build the console output shows PurgeCSS is not enabled because you are in dev mode.

Next I added cross-env to the project and added the cross-env command to the package.json:

  "scripts": {
    "dev": "nuxt",
    "build": "cross-env NODE_ENV=production nuxt build",
    "start": "nuxt start",
    "generate": "nuxt generate"
  },

If I run npm run build the console shows the same output PurgeCSS is not enabled because you are in dev mode.

> cross-env NODE_ENV=production nuxt build

i Production build                                                                                                                                                          13:23:20  
start Loading module                                                                                                                                          nuxt-purgecss 13:23:20  
i PurgeCSS is not enabled because you are in dev mode                                                                                                         nuxt-purgecss 13:23:20  
√ Builder initialized                                                                                                                                                       13:23:20  
√ Nuxt files generated   

Same issue, when I added this to nuxt.config.js:

    purgeCSS: {
        enabled: true
    }

Warning unmet peer dependency on fresh install Webpack / purgecss

On doing a fresh install, the following Warning is prompted.

warning "@nuxtjs/tailwindcss > nuxt-purgecss > [email protected]" has unmet peer dependency "webpack@^4 || ^3".

I tried to add last webpack on the package.json without success even though nuxt already uses webpack.

Custom style with module

Guys,

I detected a strange factor... In my use case I would like to stash with @apply some classes of tailwind, however, the way it is done today it loads so that I can not have a custom file applying other styles.

1 - E.g.:

# nuxt.config.js
css: ['~/assets/css/tailwind.css', '~/assets/css/app.css'],

...

build: {
      postcss: {
            plugins: {
                  tailwindcss: './tailwind.config.js',
            }
      }
}

# assets/css/app.css
@import "./components/_button";

input.form__control:focus,
select.form__control:focus,
textarea.form__control:focus {
    @apply .border-blue-500;
}

# assets/css/components/_button.css 
.bt {
    @apply .bg-blue-500
}

The above case allows me to use an extra file to customize my style. But only with the case below I can not use an extra file (e.g: app.css)

2 - E.g:

# nuxt.config.js
css: ['~/assets/css/app.css'],

devModules: ['@nuxtjs/tailwindcss'],

npm run dev => this works perfectly (eg1 and eg2)
npm run generate => here it gives problem, the custom style is not indexed follow eg2 (only works with eg1)

disable creation of tailwind.css file

In my project I include tailwind through a scss file. Is there a way to disable the creation of the css file?

assets/scss/tailwind.scss

@tailwind base;

@tailwind components;

@tailwind utilities;

see https://tailwindcss.com/docs/using-with-preprocessors/