installing tailwindcss v.3.0.15 using PostCSS doesn't work properly

January 25, 2022

I need clarification. I am following the instructions for installation https://tailwindcss.com/docs/installation/using-postcss.

What I did:

npm install -D tailwindcss postcss autoprefixer

npx tailwindcss init (creates a tailwindcss config file)

What I’m expected to do next:

Add Tailwind to your PostCSS configuration postcss.config.js
Configure your template paths tailwind.config.js

But only tailwind.config.js was created automatically. Is this normal and is one expected to create the other file manually? Or does it give a hint that something else is missing?

*** Edit ***

I created the postcss.config.js manually and added the plugins to it.

And I added the directives to the main.css file

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

however the h1 title

<h1 class="text-3xl font-bold underline">
    Hello world!
  </h1>

one is supposed to add to the application to see if everything worked, shows that not everything worked, as "Hello World" is neither bold nor underlined.

*** Solution ***
add .jsx to the possible endings

module.exports = {
  content: ["./src/**/*.{html,js,jsx}"],
  theme: {
    extend: {},
  },
  plugins: [],
}

>Solution :

Install Tailwind CSS
Install tailwindcss and its peer dependencies via npm, and create your tailwind.config.js file.

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init

Add Tailwind to your PostCSS configuration
Add tailwindcss and autoprefixer to your postcss.config.js file, or wherever PostCSS is configured in your project.

postcss.config.js

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

Configure your template paths
Add the paths to all of your template files in your tailwind.config.js file.

tailwind.config.js

module.exports = {
  content: ["*"],
  theme: {
    extend: {},
  },
  plugins: [],
}

Add the Tailwind directives to your CSS
Add the @tailwind directives for each of Tailwind’s layers to your main CSS file.

main.css

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

Start your build process
Run your build process with npm run dev or whatever command is configured in your package.json file.
this command run in Terminal

npm run dev

Start using Tailwind in your HTML
Make sure your compiled CSS is included in the (your framework might handle this for you), then start using Tailwind’s utility classes to style your content.
index.html

<!doctype html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link href="/dist/main.css" rel="stylesheet">
</head>
<body>
  <h1 class="text-3xl font-bold underline">
    Hello world!
  </h1>
</body>
</html>