'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

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
htmlcssreactjsvue.jstailwind-css


Solution 1:[1]

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.

Solution 2:[2]

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.

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 Satishkumar sahu
Solution 2 Some Dev

Related Questions