Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Error when adding @tailwindcss/ui plugin

See original GitHub issue

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

Issue Analytics

State:
Created 3 years ago
Reactions:5
Comments:8 (4 by maintainers)

Top GitHub Comments

56reactions

Atinuxcommented, Apr 6, 2020

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

10reactions

hmaestacommented, Jun 10, 2020

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