type
status
date
slug
summary
tags
category
icon
password
前言
Tailwind CSS 是一个功能强大的实用优先（Utility-First）的 CSS 框架，它通过提供大量预定义的类名，让开发者能够快速构建现代化的、响应式的用户界面。相比传统的 CSS 框架，Tailwind 的独特之处在于它不强制使用预设组件，而是赋予开发者高度的灵活性，通过组合类名实现自定义设计。在学习和使用 Tailwind CSS 的过程中，我希望通过这份笔记记录核心概念、使用技巧以及实践经验。这份笔记将涵盖安装配置、常用类名、响应式设计、自定义配置等内容，旨在帮助我系统化地掌握 Tailwind CSS，并为未来的项目开发提供参考。
Tailwind CSS 3.4 使用教程
步骤 1：安装依赖
在项目目录中，使用 npm 安装 Tailwind CSS 及其依赖：
这将安装 Tailwind CSS 3.4.1 并生成一个 tailwind.config.js 文件。
步骤 2：配置 tailwind.config.js
编辑 tailwind.config.js，指定需要扫描的模板文件路径：
步骤 3：配置 postcss.config.js
编辑 postcss.config.js，在plugins里面添加tailwindcss和autoprefixer：
如果没有postcss.config.js文件手动创建一个在根目录下
步骤 4：创建 CSS 文件
在项目中创建一个 CSS 文件（例如 styles.css），并添加 Tailwind 指令：
需要把该文件引入全局样式或者在main.js里面引入
Tailwind CSS 4 使用教程
步骤 1：安装 tailwindcss/vite
步骤 2：配置vite.config.js
步骤 3：引入css文件
在项目中创建一个 CSS 文件（例如 styles.css），并添加 Tailwind 指令：
推荐依赖
prettier-plugin-tailwindcss 用来格式化排列tailwindcss类名然后，在
.prettierrc或.prettier.config.js文件中配置(没有该文件就创建)：
