Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Breaking nuxt-tailwind with 2.6.0 version update #553

Closed
amandesai01 opened this issue Mar 6, 2022 · 1 comment
Closed

Breaking nuxt-tailwind with 2.6.0 version update #553

amandesai01 opened this issue Mar 6, 2022 · 1 comment

Comments

@amandesai01
Copy link

I am using Nuxt for frontend, with @nuxtjs/tailwindcss. As soon as I updated DaisyUI to version 2.6.0, I started facing this error.
As soon as I revert to 1.24.3, everything works perfectly fine.

 ERROR  in ./node_modules/@nuxtjs/tailwindcss/dist/runtime/tailwind.css

Syntax Error: SyntaxError

(2:1) ./node_modules/@nuxtjs/tailwindcss/dist/runtime/tailwind.css Variant cannot be generated because selector contains no classes.

  1 | @tailwind base;
> 2 | @tailwind components;
    | ^
  3 | @tailwind utilities;
  4 | 



 @ ./node_modules/@nuxtjs/tailwindcss/dist/runtime/tailwind.css 4:14-207 15:3-20:5 16:22-215
 @ ./.nuxt/App.js
 @ ./.nuxt/index.js
 @ ./.nuxt/client.js
 @ multi ./node_modules/eventsource-polyfill/dist/browserify-eventsource.js (webpack)-hot-middleware/client.js?reload=true&timeout=30000&ansiColors=&overlayStyles=&path=%2F__webpack_hmr%2Fclient&name=client ./.nuxt/client.js

Here is my tailwind.config.js:

module.exports = {
    content: [
        "./pages/**/*.{js,ts,jsx,tsx}",
        "./components/**/*.{js,ts,jsx,tsx}",
        "./layouts/**/*.{js,ts,jsx,tsx}",
    ],
    plugins: [
        require('daisyui')
    ],
    daisyui: {
        themes: [
            {
                'mytheme': {
                    'accent' : '#604187',            /* Accent color */
                    'accent-focus' : '#2aa79b',      /* Accent color - focused */
                    'accent-content' : '#ffffff',    /* Foreground content color to use on accent color */
                }
            },
        ]
    },
    theme: {
        fontFamily: {
            sans: ['Assistant', 'sans-serif'],
        }
    }
}
@saadeghi
Copy link
Owner

saadeghi commented Mar 7, 2022

daisyUI 2.0 needs Tailwind CSS 3.0 and PostCSS 8.0 dependencies but Nuxt 2 doesn't fully support Post CSS 8.0 because of dependencies.
See conversations here:

You should upgrade to Nuxt 3.0 if possible, which won't need the @nuxtjs/tailwindcss wrapper module and works well with both Tailwind CSS 3.0 and PostCSS 8.0 (example)

@saadeghi saadeghi closed this as completed Mar 7, 2022
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants