Tailwind CSS Install

=================================
Tailwind CSS Install Step by Step
=================================

Install Node js. check node -v and npm -v in cmd.

Minimum recommended:

Node.js: v16+
npm: v7+

If your version is lower, update Node.js from:
👉 https://nodejs.org/

✅ Step 1:

Create a Folder name:
my-tailwind-project

Open cmd with proper folder path
C:\my-tailwind-project

✅ Step 2:

=> npm init -y

it will create package.json. Modify / Add:

"scripts": {
    "build": "postcss css/main.css -o css/style.css --watch"
}

✅ Step 3:

Install Tailwind, PostCSS, Autoprefixer

=> npm install -D tailwindcss postcss postcss-cli autoprefixer

Creates package-lock.json and node_modules.

✅ Step 4:

Generate tailwind.config.js file.

=> npx tailwindcss init -p (sometimes it will not work in windows).

if not working with this command follow these steps:

Create "tailwind.config.js" manually and paste:

module.exports = {
 content: ["./*.html", "./css/*.css"],
 darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [],
}

✅ Step 5: 
Create "postcss.config.js" manually and paste:

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

✅ Step 5:

Create main.css file into css folder.

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

✅ Step 6: Create your HTML file
📄 index.html (example):

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Tailwind Test</title>
  <link href="./css/style.css" rel="stylesheet" />
</head>
<body class="bg-gray-100 flex items-center justify-center h-screen">
  <h1 class="text-4xl font-bold text-blue-600">Hello Tailwind!</h1>
</body>
</html>

✅ Step 8:

npx tailwindcss -i ./css/main.css -o ./css/style.css --watch

== DONE

==========================
Custom Font Use (example)
==========================
create a fonts folder and put SourGummy.ttf.

input.css
----------

@font-face {
  font-family: "Sour Gummy";
  src: url('../fonts/SourGummy.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

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

npx tailwindcss-cli -i ./css/input.css -o ./css/output.css --watch

and,

tailwind.config.js
-------------------
module.exports = {
  content: ["./*.html", "./css/*.css"],
  theme: {
    extend: {
      fontFamily: {
        sourGummy: ['"Sour Gummy"', 'sans-serif'],
      },
    },
  },
  plugins: [],
}

index.html
----------

<h1 class="font-sourGummy text-6xl">
    This is using MyFont!
</h1>

or write in input.css,

h1{font-family: "Sour Gummy";}

=============
Customize CSS
=============

.my-button {
  @apply bg-blue-500 text-white py-2 px-4 rounded hover:bg-blue-600;
}

<button class="my-button">Click Me</button>

=====================================================
Customize HTML (hover, class, own style example => "py-[100px]")
=====================================================

<button class="bg-cyan-500 text-white hover:bg-cyan-600 px-8 py-[100px] hover:text-white mt-2 ml-2 uppercase table rounded-md>Subscribe</button>