Setting up Tailwind CSS v3.0 - Using PostCSS

Follow the Steps given blow to install Tailwind CSS for fresh development for HTML

Install & Setting up - Tailwind and PostCSS

Step 1 - Install Tailwind CSS

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

Code 1

npm install -D tailwindcss postcss autoprefixer

Code 2

npx tailwindcss init

Step 2 - Add Tailwind to your PostCSS configuration

Add tailwindcss and autoprefixer to your postcss.config.js file.

fileName : postcss.config.js

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

Step 3 - Configure your template paths

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

fileName : tailwind.config.js

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

Step 4 - Add the Tailwind directives to your CSS

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

fileName : css/tailwind.css

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

Step 5 - Start your build process

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

npm run dev

Step 6 - 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.

fileName : src/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.min.css" rel="stylesheet">
</head>

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

</html>

NOTE: update or change your code as per the need.

Install & Setting up - Tailwind and PostCSS

NOTE: create Folder "css" on ROOT | create folder "src" on ROOT

Follow the STEPS given blow after process the above Steps

STEP 1 - Install Packages - concurrently , live-server & postcss-cli

npm install -D concurrently live-server postcss-cli

STEP 2 - Add this "scripts" code in package.json

{
  "devDependencies": {
    "autoprefixer": "^10.4.0",
    "postcss": "^8.4.4",
    "tailwindcss": "^3.0.1"
  },

  "scripts": {
    "serve": "concurrently \"postcss css/tailwind.css -o src/dist/main.min.css --watch\"  \"live-server ./src\"",
    "development": "postcss css/tailwind.css -o src/dist/main.min.css",
    "production": "postcss css/tailwind.css -o src/dist/main.min.css",
    "start": "npm run serve"
  }
}

use postcss-cli help you transform css file
use concurrently run multiple scripts at the same time concurrently
use live-server to run live-reload server since you said you don't use any framework

xpharsh/TailwindCSS_v3.0-Using-PostCSS-PUBLIC.md