Tailwind CSS is not kicking in my project, I tried to learn this new CSS framework I installed everything as instructed in the docs but Its not worked

Question

enter code here//I installed and setup the things as instructed in tailwind docs but when I apply tailwind utility classes on my HTML file it is not working could anyone please help

// this is my src/style.css

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

//I build the script by the command npm run build-css it generated pre build CSS in public folder. there I created HTML file 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" />
    <title>Document</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <div>
      <h1 class="text-orange-700">Hello Jaydeep</h1>
    </div>
  </body>
</html>
'''
// when I apply tailwind classes in it doesn't work, One more thing I want to mention is that when I included CSS file in HTML then the Fonts and size got changed, but when I applied utility classes style It's not working

Satishkumar sahu · Accepted Answer · 2021-12-28 07:35:19Z

4

if you have followed everything according to the docs, one thing you can do is set your style.css as input file and create an another css file as your output file and use that file in your .html, to do this, you can run the following command

npx tailwindcss -i src/styles.css --output src/styles/tailwind.css --watch

here it will create a output file named tailwind.css in the above mentioned directory and you can now inclued src/styles/tailwind.css in your .html file.

answered Dec 28, 2021 at 7:35

Satishkumar sahu

931 silver badge10 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

jaydeep bhattacharya Over a year ago

could you please elaborate a little bit more on what I got from your answer is that I changed the file name as input.css in the src folder and make one more style file with the name of output.css in the src folder and run the above command but it showed me Specified input file src/styles.css does not exist.

Satishkumar sahu Over a year ago

No, in the above command you are supposed to pass your input file, since now you've changed it to input.css, the above command will now change to ``` npx tailwindcss -i src/input.css --output src/styles/tailwind.css --watch```, you do not need to create an output file separately, tailwind will generate it automatically in the path mentioned in the command, so you will see a new file as tailwind.css in your src/styles folder, now include this file in your html file

jaydeep bhattacharya Over a year ago

brother It showed me Specified input file src/input.css does not exist.

Satishkumar sahu Over a year ago

ok, do you have a input.css in your src folder? if not just adjust the path in the command as your input file path.

Some Dev · Accepted Answer · 2022-02-25 23:18:15Z

1

Okay, since lots of information is missing, I'll try to help with some standard steps.

If you're using react-native-rn, and can't get to generate tailwind.json, look here

First, check out your package.json or the command you're running.

The command should look like this

tailwind --input path/to/your/css/file.css --output path/to/file/tailwind/will /generte.css

Basically same answer as Satishkumar sahu, just explained in a different way.

answered Feb 25, 2022 at 23:18

Some Dev

4204 silver badges13 bronze badges

Collectives™ on Stack Overflow

Tailwind CSS is not kicking in my project, I tried to learn this new CSS framework I installed everything as instructed in the docs but Its not worked

2 Answers 2

4 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related