Nuxt "yarn dev" build loop after setting up "@nuxtjs/tailwindcss": "^5.0.2"

Question

When I use @apply in my style tag like that:

<style lang="postcss" scoped>
input {
  @apply absolute right-0 top-0 opacity-0 z-10;
}
</style>

It generate a loop/reload:

these are my dependencies:

"dependencies": {
    "@nuxtjs/axios": "^5.13.6",
    "core-js": "^3.19.3",
    "nuxt": "^2.15.8",
    "vue": "^2.6.14",
    "vue-server-renderer": "^2.6.14",
    "vue-template-compiler": "^2.6.14",
    "webpack": "^4.46.0"
  },
  "devDependencies": {
    "@babel/eslint-parser": "^7.16.3",
    "@nuxtjs/eslint-config": "^8.0.0",
    "@nuxtjs/eslint-module": "^3.0.2",
    "@nuxtjs/svg": "^0.4.0",
    "@nuxtjs/tailwindcss": "^5.0.2",
    "eslint": "^8.4.1",
    "eslint-plugin-nuxt": "^3.1.0",
    "eslint-plugin-vue": "^8.2.0",
    "postcss": "^8.4.4"
  }

This is my eslint config:

module.exports = {
  root: true,
  env: {
    browser: true,
    node: true
  },
  parserOptions: {
    parser: '@babel/eslint-parser',
    requireConfigFile: false
  },
  extends: [
    '@nuxtjs',
    'plugin:nuxt/recommended'
  ],
  plugins: [
  ],
  // add your custom rules here
  rules: {}
}

this is my nuxt config:

 // Modules for dev and build (recommended): https://go.nuxtjs.dev/config-modules
  buildModules: [
    // https://go.nuxtjs.dev/eslint
    '@nuxtjs/eslint-module',
    // https://go.nuxtjs.dev/tailwindcss
    '@nuxtjs/tailwindcss',
    '@nuxtjs/svg'
  ],

  // Modules: https://go.nuxtjs.dev/config-modules
  modules: [
    // https://go.nuxtjs.dev/axios
    '@nuxtjs/axios'
  ],

  // Axios module configuration: https://go.nuxtjs.dev/config-axios
  axios: {
    // Workaround to avoid enforcing hard-coded localhost:3000: https://github.com/nuxt-community/axios-module/issues/308
    baseURL: '/'
  },

  // Build Configuration: https://go.nuxtjs.dev/config-build
  build: {
  },

  server: {
    port: 9000, // default: 3000
    host: '0.0.0.0'
  }

they were discussing in this issue the problem https://github.com/nuxt-community/tailwindcss-module/issues/359 but that solutions are not working for me :( any help?

The given solution is not working? Mind sharing the code you tried there? Also, are you sure the issue is not coming from ESlint here? — kissu
– kissu, Commented Apr 7, 2022 at 15:20
Do you have it as a public Github repo? It may come from various aspects. Does it happen with a brand new Nuxt project? — kissu
– kissu, Commented Apr 7, 2022 at 15:47
@kissu no i don't have. Yes is a new project, i changed manually the version of @nuxtjs/tailwindcss it was the 4 but i updated to the last to have tailwindcss3 — Luca Spezzano
– Luca Spezzano, Commented Apr 7, 2022 at 16:42
I experienced the same and posted a temp fix to the github thread you linked to (removing @nuxtjs/eslint-module). Would keep an eye out there for a permanent fix. — Brendan
– Brendan, Commented Apr 7, 2022 at 23:54
@Brendan it worked thanks a lot, but now eslint will work?🤔 — Luca Spezzano
– Luca Spezzano, Commented Apr 8, 2022 at 4:28

Luca Spezzano · Accepted Answer · 2022-04-08 05:42:55Z

1

I got a fix from the answers i got on the issue ;)

One temporary fix can be to add this in the nuxt.config.js

watchers: {
    webpack: {
      ignored: [
        '**/*.eslintcache',
        '**/.git/**'
      ]
    }
  },

answered Apr 8, 2022 at 5:42

Luca Spezzano

3803 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Nuxt "yarn dev" build loop after setting up "@nuxtjs/tailwindcss": "^5.0.2"

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related