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

Question

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

Answer 1

I spent whole day to solve this issue. I'm sharing my experience below:

Open your project folder & open vscode then open terminal then type command

1. npm install -D tailwindcss
2. npx tailwindcss init

Then create a src Folder with input.css file[whatever you can give a name]. Then type code in css file like

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

after that create index.html under src folder. Then copy paste as tailwindcss doc html code section. Then configure your tailwind.config.js content section

content: ["./src/index.html"],

Now run npm init -y After that need to change package.json file like

"main": "tailwind.config.js",
"scripts": {
    "build": "tailwindcss -i ./src/input.css -o ./dist/output.css --watch"
  },

Now run command

npm run build

You can watch this video