一、Tailwind CSS 简述及安装 - 添加Tailwind 4 的使用方法

Tailwind CSS 是一个功能类优先的 CSS 框架，它与传统的 UI 框架（如 Bootstrap、Bulma 等）不同，不提供预设的组件，而是提供大量的功能类（utility classes），让开发者能够直接在 HTML 中组合这些类来构建自定义设计。

restyhap

6309人浏览 · 2025-03-02 10:38:31

restyhap · 2025-03-02 10:38:31 发布

Tailwind CSS 简述及安装

一、Tailwind CSS 简介

1.1 什么是 Tailwind CSS

1.2 Tailwind CSS 的特点

功能类优先：直接在 HTML 中应用样式，减少在 CSS 文件中编写自定义样式的需求
高度可定制：通过配置文件可以完全控制颜色、断点、字体等设计系统
响应式设计：内置响应式变体，轻松创建适应不同屏幕尺寸的界面
暗色模式：内置暗色模式支持
按需生成：只包含你使用的样式，保持 CSS 文件体积小

1.3 与传统 CSS 框架的区别

传统 CSS 框架提供预设组件，而 Tailwind 提供原子化的功能类：

<!-- Bootstrap 按钮 -->
<button class="btn btn-primary">按钮</button>

<!-- Tailwind CSS 按钮 -->
<button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
  按钮
</button>

二、安装 Tailwind CSS

2.1 使用 npm 安装

# 安装 Tailwind CSS 及其依赖
npm install -D tailwindcss postcss autoprefixer

# yarn 安装 
yarn add tailwindcss postcss autoprefixer

2.2 配置文件设置

# 生成配置文件
npx tailwindcss init -p

在生成的 tailwind.config.js 文件中配置内容路径：

/** @type {import('tailwindcss').Config} */
export default {
  content: ['./index.html', './src/**/*.{vue,js,ts,jsx,tsx}'],
  theme: {
    extend: {},
  },
  plugins: [],
}

2.3 创建 CSS 文件

创建一个 CSS 文件（如 src/tailwind.css）并添加 Tailwind 指令：

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

2.4 在项目中引入

在 Vue 项目中

// main.js
import './tailwind.css'

在 React 项目中

// index.js 或 App.jsx
import './tailwind.css'

备注 : 因为我的习惯是vite+yarn来构建项目, 所以留一份自己适配的vite.config.js进行备忘, 以供参考。

//...其它略
import tailwindcss from "tailwindcss";
import autoprefixer from "autoprefixer";

export default defineConfig({
  base: '/',
  css: {
    postcss: {
      plugins: [tailwindcss, autoprefixer],
    }
  },
  //...其它略
})

2.5 使用 CDN（简单项目）

对于简单项目，可以直接使用 CDN：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="https://cdn.tailwindcss.com"></script>
  <title>Tailwind CSS 示例</title>
</head>
<body>
  <div class="container mx-auto p-4">
    <h1 class="text-3xl font-bold text-blue-600">Hello Tailwind CSS!</h1>
  </div>
</body>
</html>

三、基本使用示例

<div class="max-w-md mx-auto bg-white rounded-xl shadow-md overflow-hidden md:max-w-2xl m-4">
  <div class="md:flex">
    <div class="md:shrink-0">
      <img class="h-48 w-full object-cover md:h-full md:w-48" src="/img/example.jpg" alt="示例图片">
    </div>
    <div class="p-8">
      <div class="uppercase tracking-wide text-sm text-indigo-500 font-semibold">Tailwind CSS 示例</div>
      <a href="#" class="block mt-1 text-lg leading-tight font-medium text-black hover:underline">使用功能类构建现代网站</a>
      <p class="mt-2 text-slate-500">使用 Tailwind CSS 可以快速构建现代、响应式的用户界面，无需编写自定义 CSS。</p>
    </div>
  </div>
</div>

参考链接

四 ( 新添加 )、添加Tailwindcss4的简化使用方式

执行安装 :

# npm安装
npm install tailwindcss @tailwindcss/vite
# yarn安装
yarn add tailwindcss @tailwindcss/vite

修改vite.config.js

//添加 tailwindcss 导入
import tailwindcss from '@tailwindcss/vite';
import vue from '@vitejs/plugin-vue';
import {defineConfig} from 'vite';

// https://vite.dev/config/
export default defineConfig({
	// 添加导入的 tailwindcss()
  plugins: [vue(), tailwindcss()],
});

修改 main.ts

// 添加依赖即可
import 'tailwindcss/index.css';

App.vue中测试

<div class="bg-red-300">
  <h1>Hi, this is test page</h1>
</div>

展示效果 :

五、tailwindcss配置

1、安装插件, 实现类提示。

在IDE ( vs-codd、cursor、 trea 等等 ) 的插件市场搜索 Tailwind CSS IntelliSense 插件进行安装。

2、配置格式化 ( 按照我们推荐的类顺序自动对您的类进行排序。 )

安装格式化插件

# npm
npm install -D prettier prettier-plugin-tailwindcss
# yarn
yarn add prettier prettier-plugin-tailwindcss

根目录创建 .prettierrc 文件

{ "plugins": ["prettier-plugin-tailwindcss"] }

配置项目采用默认的格式化插件设置 , 在 .vscode 文件夹里面添加一个 setting.json 文件, 内容如下。

{
    "editor.formatOnSave": true,
    "editor.defaultFormatter": "esbenp.prettier-vscode",
    "editor.codeActionsOnSave": {
        "source.fixAll.eslint": "explicit",
        "source.organizeImports": "explicit"
    },
    "[vue]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "[javascript]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "[typescript]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    }
}

按保存

<!-- 原html -->
<div class="bg-red-300 w-240 m-auto">
  <h1 class="w-240 text-center bg-green-300">Hi, this is test page</h1>
</div>
<!-- 新html -->
<div class="m-auto w-240 bg-red-300">
  <h1 class="w-240 bg-green-300 text-center">Hi, this is test page</h1>
</div>