Search code examples
tailwind-cssvitepostcsspreact

Some classes of tailwind suddenly not working in my Preact + Vite application

I used to work with TailwindsV3, Preact, and Vite3, And they work well.

I extended the tailwind theme and it worked just fine.

However, After I tweaked a bit of tailwind config,
Some classes of default tailwind suddenly stop working,
And never able to get it to work again even if I turn the config back.

For example,
Classes with padding 1 and 2 like p-1 px-2 are missing.
But classes with padding 3 and 4 like p-3 py-4 are still there.

enter image description here

It didn't turn back even after I removed all of my extended themes.

Does anyone know what's happing here?

Here are my configurations

postcss.config.cjs

module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
}

tailwind.config.cjs

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./src/**/*.{js,jsx,ts,tsx}",
  ],
  theme: {
    extend: {
      colors: {
        "primary": "#242424",
        "gray": {
          "1": "#EAEAEA",
          "2": "#ACB5BD",
          "3": "#838A90",
          "4": "#2B2F35",
        }
      },
      borderWidth: {
        '05': '0.5px',
      }
    },
  },
  plugins: [],
}

package.json

{
  "name": "editor",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "tsc && vite build",
    "preview": "vite preview"
  },
  "dependencies": {
    "preact": "^10.10.1",
    "react-icons": "^4.4.0"
  },
  "devDependencies": {
    "@preact/preset-vite": "^2.3.0",
    "autoprefixer": "^10.4.12",
    "postcss": "^8.4.16",
    "tailwindcss": "^3.1.8",
    "typescript": "^4.6.4",
    "vite": "^3.0.7"
  }
}

Here is what I've tried that didn't work. (After I've removed all of my extended themes)

  • Clear node_modules and yarn install again.
  • Run using vite build and vite preview
  • Clear browser caches / Change the browser.
Solution

  • The conclusion is Tailwind is not supporting dynamic class name construction, I've used it in my code.

    https://tailwindcss.com/docs/content-configuration#dynamic-class-names