'Tailwind class is not working after installed

I try to use CSS, im just install the tailwindcss with npm, and then i build the css and provide the output.css. But, when i use the bg-black class in button for testing, it's still not working.

build command that i use tailwindcss -i ./src/style.css -o ./dist/output.css i put it into script in package.json

Directory file path:
enter image description here

in src/style.css

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

in tailwind.config.js

    theme: {
      extend: {
        // ...
      },
    },
    plugins: [],
  }

in dist/index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="output.css">
    <title>Learn Tailwind</title>
</head>
<body>
    <div class="container">
        <button class="bg-black">Awesome</button>
    </div>
</body>
</html>

The HTML in browser result:

enter image description here

htmlcsstailwind-css


Solution 1:[1]

I had the same issue. it is to do with your tailwind.config.js Make sure you have the content list pointing to your html files that are using tailwind. (see code below to look at all files with html at one level down)

Then run the command:

npx tailwindcss -i ./src/input.css -o ./dist/output.css --watch

Ensure you don't get any warning messages about invalid paths.

module.exports = {
  content: ['./*/*.html', ],
  theme: {
    extend: {},
  },
  plugins: [],
}

Solution 2:[2]

  1. Go to tailwind.config.js file. On the very first line, you will find content, add location the of your html files

    module.exports = {
   content: ['./index.html'],
   theme: {
     extend: {
       primary : '#243c5a', 
       secondary : {
         100: '#243c5a',
       }
     },
   },
   plugins: [],
 }

  2. Go to cmd and run command npm run build-css to rebuild and show any error your code has.

Read more here

Solution 3:[3]

I see you are using build command and put it in your package.json, that is right. But did you run npm run build then?

Solution 4:[4]

I see you import "output.css" in your code but you necessarily need to import your tailwind css file. Ex:

<link rel="stylesheet" href="src/style.css">

See doc: https://tailwindcss.com/docs/installation

Solution 5:[5]

in tailwind.config.js you have to target your output elements like this -->

module.exports = { content: [ "./pubblic/index.html", "./pubblic/index.js" ], theme: { extend: {}, }, plugins: [], }

after this, you can run your script

"tailwindcss build src/styles.css -o pubblic/style.css"

this should work

Solution 6:[6]

If you are running a Jumpstart Pro app, make sure you are using bin/dev instead of rails s to run your app. That was my problem :)

Solution 7:[7]

You can simply change the following codes in your style.css and it will work.

from this

@tailwind base;

@tailwind components;

@tailwind utilities;

to this

@import "tailwindcss/base";

@import "tailwindcss/components";

@import "tailwindcss/utilities";

Rest of the codes remain same. Only the above needs to be changed and you're good to go. This usually happens in tailwind v3.

Hope the answer helps you.

Solution 8:[8]

Had the same issue while all my configurations were right, this solved the problem for me : package.json --> tap the small 'Debug' on top of 'Scripts' or run "npm run build-css "

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Davy de Vries
Solution 2 Youzef
Solution 3 Karina
Solution 4 Yannis Haismann
Solution 5 Elais
Solution 6 therealrodk
Solution 7
Solution 8 Suky

Related Questions