Important modifier is not working.

deanocean commented 2 years ago

I was trying to use important modifier according to official document of tailwindcss like !font-bold. But it's not working. I don't know whether it's a bug or I have something missing. I am using the default config of tailwindcss.

Here is my package.json

{
  "name": "nuxt-template",
  "version": "1.0.0",
  "private": true,
  "scripts": {
    "dev": "nuxt",
    "build": "nuxt build",
    "start": "nuxt start",
    "generate": "nuxt generate",
    "storybook": "nuxt storybook"
  },
  "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": {
    "@aceforth/nuxt-optimized-images": "^1.4.0",
    "@nuxtjs/storybook": "^4.3.0",
    "@nuxtjs/tailwindcss": "^4.2.1",
    "imagemin-mozjpeg": "^9.0.0",
    "imagemin-pngquant": "^9.0.2",
    "imagemin-svgo": "^9.0.0",
    "postcss": "^8.4.4",
    "sass": "^1.49.9",
    "sass-loader": "^10.2.1"
  }
}

htownson commented 2 years ago

I had the same issue as you and was using the same tailwind version.

I upgraded @nuxtjs/tailwindcss to ^5.0 and it fixed it.

note: Had to do a few other things as a result, install @nuxt/kit and change up my tailwind config a little bit as per the upgrade guide but it will tell you what you need to do when you run npm after upgrading.

edit: not sure if the nuxt/kit thing was because of this or because I also upgraded my npm

deanocean commented 2 years ago

@htownson Thanks for answering! I just upgraded @nuxtjs/tailwindcss to ^5.0 and now it works!

nuxt-modules / tailwindcss

Important modifier is not working. #447