Search code examples
tailwind-cssparceljs

Why is tailwind css having no effect?

No errors, but Tailwind doesn't apply any style:

package.json

"dependencies": {
    "tailwindcss": "npm:@tailwindcss/postcss7-compat@^2.0.2",
    "vue": "^3.0.5"
},
"devDependencies": {
    "autoprefixer": "^9.8.6",
    "parcel-bundler": "^1.12.4",
    "postcss": "^7.0.35",
    "@vue/cli": "^5.0.0-alpha.2"
},

postcss.config.js

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

tailwind.config.js

module.exports = 
{
  purge: [],
  darkMode: 'class', // or 'media' or 'class'
  theme: 
  {
    extend: {},
  },
  variants: 
  {
    extend: {},
  },
  plugins: [],
}

index.html

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="css/main.css">
</head>
<body class="dark bg-gray-100">  
    <div class='app' id='app' class="bg-red-500">
        <div class="text-gray-50">hello world</div>
    </div>
</body>
</html>

main.css

@import "../../node_modules/tailwindcss/base.css";
@import "../../node_modules/tailwindcss/components.css";
@import "../../node_modules/tailwindcss/utilities.css";

Built using: node ./node_modules/.bin/parcel src/index.html

Solution

  • Instead of importing Tailwind's CSS files from the node_modules directory, use the @tailwind directives as instructed in the Include Tailwind in your CSS section in the Tailwind docs:

    @tailwind base;
@tailwind components;
@tailwind utilities;

    Then it should work – I just confirmed it on my machine. (Though your build command didn't work for me, so I used npx parcel src/index.html instead.)

    If you take a look at the CSS files that you were importing, you'll see that they contain the same @tailwind directives that I mentioned above. I'm not sure, but I think that PostCSS first runs the Tailwind plugin, and after that processes the @imports. This would explain why PostCSS didn't process the @tailwind directives from the imported CSS files (because it had already run the Tailwind plugin).