Getting-Started-with-Tailwindcss

Offical Documents

https://www.tailwindcss.cn/

Tailwindcss 4.1.0

Offical Doc
https://tailwindcss.com/docs/installation/using-vite

Add tailwindcss to Exist Project

Step 1. Install

1
pnpm install tailwindcss @tailwindcss/vite

Step 2. Add the @tailwindcss/vite plugin to your Vite configuration.

1
2
3
4
5
6
7
import { defineConfig } from 'vite'
import tailwindcss from '@tailwindcss/vite'
export default defineConfig({
  plugins: [
    tailwindcss(),
  ],
})

Step 3. Add an @import to your CSS file

1
@import "tailwindcss";

Tailwindcss 3.4.16

Basic Node.js Project

Create Project

1
npm init -y

Add package.json

package.json

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
{
  "name": "tailwindcss-demo",
  "version": "1.0.0",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "description": "",
  "dependencies": {
    "tailwindcss": "3.4.16"
  }
}

Install Dep

1
pnpm i

Init tailwindcss

1
npx tailwindcss init

Config Tailwind

tailwind.config.js

1
2
3
4
5
6
7
8
/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["**/*.{html,js}"],
  theme: {
    extend: {},
  },
  plugins: [],
}

if useReact

1
2
3
4
5
6
7
8
/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["**/*.{html,js,jsx,ts,tsx}"],
  theme: {
    extend: {},
  },
  plugins: [],
}

配置
File styles.css.

1
2
3
@tailwind base;
@tailwind components;
@tailwind utilities;

Add Compiling CSS Files Command

监听编译

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
{
  "name": "tailwindcss-demo",
  "version": "1.0.0",
  "main": "index.js",
  "scripts": {
    "dev:css": "tailwindcss -i styles.css -o output.css --watch"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "description": "",
  "dependencies": {
    "tailwindcss": "3.4.16"
  }
}
1
pnpm dev:css

Simple Test

index.html

1
2
3
4
5
6
7
8
9
10
11
12
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link href="./output.css" rel="stylesheet" />
</head>
<body>
    <h1 class="text-5xl text-purple-400">Tailwind CSS</h1>
</body>
</html>

index.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link href="./output.css" rel="stylesheet" />
</head>
<body>
    <div class="flex flex-col size-[200px] bg-black text-zinc-50">
        <div>12</div>
        <div>34</div>
    </div>

    <div class="flex flex-col size-[200px] shadow-md gap-2">
        <div class="size-10">12</div>
        <div class="size-[100px] bg-zinc-200">34</div>
    </div>
</body>
</html>

Getting-Started-with-Tailwindcss
https://www.hardyhu.cn/2024/12/24/Getting-Started-with-Tailwindcss/
Author
John Doe
Posted on
December 24, 2024
Licensed under