Tailwind class is not working after installed

user_15688384 0
Viewed 29326

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

tailwind-css css html
11 Answers

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: [],
}
user_126510260

  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

user_71273410

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.

user_125097270
user_162263930

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?

user_169110420

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

user_178088280

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 :)

user_91409700

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 "

user_185783890

Hi guys i have a simple solution just take the tailwind.config.js, package-lock.json and index.html files and insert them to src folder, hope this will help for others.

user_151307370

We need to edit the folder file global.css

@import "tailwindcss/base";

@import "tailwindcss/components";

@import "tailwindcss/utilities";enter image description here

user_126533310

In general tailwindcss does not recommend using dynamic classes as they mentioned in their documentation here is a link.

Don't construct class names dynamically:

<div class="text-{{ error ? 'red' : 'green' }}-600"></div>

In the example above, the strings text-red-600 and text-green-600 do not exist, so Tailwind will not generate those classes.

Instead, make sure any class names you’re using exist in full:

Always use complete class names

<div class="{{ error ? 'text-red-600' : 'text-green-600' }}"></div>
user_79468450
Related