0

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.
kitta
  • 1,723
  • 3
  • 23
  • 33
  • 1
    Probably that `content` part needs modification. Looks like tailwind is not seeing some of your files. Can you post your directory structure? Also, have you added those classes directly in index.html? If so, then you need to add `'./index.html'` to the content array. – brc-dd Oct 03 '22 at 11:40
  • I didn't add it directly in the index.html. I added it via preact component. But I deleted most of HTML tags in the screenshot to have bare minimum example. – kitta Oct 03 '22 at 11:56
  • I think the content part works fine because if I remove it all of the Tailwind classes will be gone. – kitta Oct 03 '22 at 11:58
  • 1
    It doesn't need to be removed. You need to add some more patterns to it. I can't tell for sure unless you add your directory structure to the post. – brc-dd Oct 03 '22 at 12:12
  • @brc-dd I think you probably right. I did try as a simple tailwind on the `src/app.tsx`. All the classes work fine. – kitta Oct 03 '22 at 12:20
  • Let me try myself before I get back with more directory structure info. Thanks so much for bearing with me. – kitta Oct 03 '22 at 12:21
  • @brc-dd I think I've found the issue, It's caused by dynamic class names in my code. Thanks for hinting me again. – kitta Oct 03 '22 at 14:34
  • Ah, That's helpful. – kitta Oct 03 '22 at 19:32

1 Answers1

1

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

kitta
  • 1,723
  • 3
  • 23
  • 33