Tailwindcss-module: Error when adding @tailwindcss/ui plugin

Created on 4 Apr 2020 · 8Comments · Source: nuxt-community/tailwindcss-module

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

bug has-workaround

Source

foxted

👍4

Most helpful comment

Hi @foxted

Indeed I have seen this issue popup recently, see https://github.com/tailwindcss/tailwindcss/issues/1190#issuecomment-546621554.

You can fix it by disabling the focus-within-pseudo-class in your nuxt.config.js:

 build: {
    postcss: {
      preset: {
        features: {
          // Fixes: https://github.com/tailwindcss/tailwindcss/issues/1190#issuecomment-546621554
          "focus-within-pseudo-class": false
        }
      }
    }
  }

Atinux on 6 Apr 2020

🎉19 ❤16 👍11 😕2 😄2 👀1 🚀1 👎1

All 8 comments

Hi @foxted

Indeed I have seen this issue popup recently, see https://github.com/tailwindcss/tailwindcss/issues/1190#issuecomment-546621554.

You can fix it by disabling the focus-within-pseudo-class in your nuxt.config.js:

 build: {
    postcss: {
      preset: {
        features: {
          // Fixes: https://github.com/tailwindcss/tailwindcss/issues/1190#issuecomment-546621554
          "focus-within-pseudo-class": false
        }
      }
    }
  }

Atinux on 6 Apr 2020

🎉19 ❤16 👍11 😕2 😄2 👀1 🚀1 👎1

Resolved via https://github.com/csstools/postcss-focus-within/pull/5 (but still not available)

manniL on 26 Apr 2020

I think this issue can be closed. I am using @tailwindcss/ui for a couple of days without problems.

hmaesta on 10 Jun 2020

👎8

Thanks for the info @hmaesta ☺️

manniL on 12 Jun 2020

still have this issue. can you re-open ?

benoit-ponsero on 13 Jul 2020

Hey @benoit-ponsero.
Can you share your tailwind.config.js and nuxt.config.js?

Just created a Sandbox with Nuxt 2.13.3 + @nuxtjs/tailwindcss@^2.0.0 + @tailwind/ui 0.3.1 and it appears OK.

→ https://codesandbox.io/s/nuxt-tailwind-css-tailwind-ui-ekdqq?file=/tailwind.config.js

(Fork, open a new Terminal tab and run yarn generate)

hmaesta on 13 Jul 2020

Hi @hmaesta,

You are right. @nuxtjs/tailwindcss was stuck in v1.4.1.

Seems to work since upgrading.

benoit-ponsero on 16 Jul 2020

For your information, I just spent a couple of hours having that same issue while trying to deploy on heroku with a NODE_ENV different from production. Only difference is I do not use tailwind-ui at all, only tailwind.
nuxt 2.14.0 & @nuxtjs/tailwindcss 2.1.0

The workaround from @Atinux seems to work fine, anyway.