Tailwind - a utility classes

chakra ui - Component Library

0. Shortcut Installation

• Extract Here the MY_TEMPLATE zip file

• To Execute the template, run the command

  • npm run start in the terminal of VS Code.

1. Tailwind CSS Installation

🔗 Tailwind CSS using PostCSS

🪜 Step 1:

npm init -y

🪜 Step 2:

npm install -D tailwindcss postcss autoprefixer
npm vite

or

npm install -D tailwindcss postcss autoprefixer vite

🪜 Step 3:

npx tailwindcss init -p

🪜 Step 4: Create a CSS file main.css or style.css

• Add it to your html file

    <link rel="stylesheet" href="main.css">

  <script src="https://cdn.tailwindcss.com"></script>

• Paste the below content ⬇️ in your main.css file

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

or

// FileName: 📄 index.js
import 'tailwindcss/base.css';
import 'tailwindcss/components.css';
import 'tailwindcss/utilities.css';

🪜 Step 5: In tailwind.config.js file

• replace content[] with content["*"]

"*"

🎯 or

FileName: tailwind.config.js

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./src/**/*.{html,js}"],
  theme: {
    extend: {},
  },
  plugins: [],
}

🪜 Step 6: In package.json file

• Add "start": "vite" to your scripts

"start": "vite"

🪜 Step 7:

Run npm run start command to start a dev serve

npm run start

or

npm run start -- --host

• For vite server to get host link of network.

2. VS Code Extension - for tailwindcss

1. Tailwind CSS IntelliSense

   • It enhances the Tailwind development experience by providing features such as autocomplete, syntax highlighting, and linting.

2. PostCSS Language Support

   • Resolve Error: ⚠️ unknown rule @apply in css File

3. Headwind Extension

   • Tailwind CSS class sorter for Visual Studio Code. It enforces consistent ordering of classes by parsing your code and reprinting class tags to follow a given order.

Headwind: `Run On Save`
⬛ A flag that controls whether or not Headwind will sort your Tailwind CSS classes on save.

Note: Remain this option as untick.

1. 🔗 Tailwind CSS Debug Screens- GitHub Installation Instruction

   • A Tailwind CSS component that shows the currently active screen (responsive breakpoint).

2. 🔗 Tailwindcss Brand Colors- GitHub Installation Instruction

   • Tailwind plugin for adding brands colors as background, border and text colors.

3. Deploying a Tailwind Website to Production : Tailwind Tutorial #13

FileName: package.json
{
  "scripts": {
    "build": "vite build",
    "preview": "vite preview"
  }
}