Tailwind CSS 是一个实用的 CSS 框架，提供了大量预定义的类，帮助开发者快速构建美观的网页界面。以下将详细介绍如何在项目中安装和使用 Tailwind CSS。
一、安装 Tailwind CSS
1、使用 npm 安装 Tailwind CSS 及其依赖
在项目根目录下，运行以下命令来安装 Tailwind CSS、PostCSS 和 Autoprefixer（一个用于添加浏览器前缀的 PostCSS 插件）。
npm install -D tailwindcss postcss autoprefixer2、初始化 Tailwind CSS 配置文件
使用 npx 运行 Tailwind CSS 的 init 命令来创建配置文件 tailwind.config.js。
npx tailwindcss init配置文件示例（根据需要调整）：
/** @type {import('tailwindcss').Config} */module.exports = { content: [ './src/**/*.{js,jsx,ts,tsx,vue,html}', ], theme: { extend: {}, }, plugins: [],}请注意，content 数组中的路径应指向项目中包含类名的所有文件，这样 Tailwind CSS 才能只包含实际使用的类，以减小最终 CSS 文件的大小。
二、构建和使用 Tailwind CSS
1、创建样式文件
在项目根目录下或特定目录（如 src）中创建一个 CSS 文件（如 input.css），并添加 Tailwind CSS 的指令。
@tailwind base; @tailwind components; @tailwind utilities;2、构建样式文件
在项目根目录下通过命令行工具构建样式文件。
npx tailwindcss -i ./src/input.css -o ./src/tailwind.css --watch3、在HTML文件中引入样式
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link href="./tailwind.css" rel="stylesheet"> </head> <body> <h1 class="text-3xl font-bold underline">Hello world!</h1> </body> </html>4、在vue项目中全局引入
在 main.js 或相应的入口文件中引入构建后的 CSS 文件。
import Vue from 'vue' import App from './App.vue' import './tailwind.css' // 全局引入样式文件 Vue.config.productionTip = false new Vue({ render: h => h(App), }).$mount('#app')三、使用 Tailwind CSS
现在，您可以在 HTML 或 Vue 组件的模板中直接使用 Tailwind CSS 提供的类来设置样式了。例如，在 Vue 组件的模板中：
<template> <div class="bg-blue-500 text-white p-4 rounded"> <h1 class="text-2xl font-bold">Welcome to Tailwind CSS</h1> </div> </template>四、注意事项
确保在开发过程中保持 Tailwind CSS 构建命令的持续运行，以便实时更新样式。
根据项目需求调整 tailwind.config.js 中的配置，如自定义主题、插件等。
考虑使用 Tailwind CSS 的 JIT 模式（Just-in-Time），它可以在开发过程中仅包含实际使用的类，进一步减小最终 CSS 文件的大小。启用 JIT 模式通常需要在 tailwind.config.js 中设置 mode: 'jit'。
新时代农民工 （QQ：277718357） 点击关注下方 ↓