会在项目中创建tailwind.config.js文件

在tailwind.config.js中添加代码：

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [ './src/**/*.{html,vue,js}' ],
  theme: {
    extend: {}
  plugins: []
引入Tailwind样式到项目中
 
在assets中创建一个tailwind.css样式文件，引入：
 
@tailwind base;
@tailwind components;
@tailwind utilities;
 
使用命令：
 
npx tailwindcss -i ./src/assets/tailwind.css -o ./src/assets/output.css --watch
 
在main.js中引入：
 
import './assets/tailwind.css'
import './assets/output.css'
 
在package.json中加入：
 
"tail": "tailwindcss -i ./src/assets/tailwind.css -o ./src/assets/output.css --watch"
 
重启项目即可。
 
具体用法可以参考官网：中文文档 - Tailwind CSS 中文文档
                                    PostCSS 插件Vite 使用 PostCSS 插件处理 CSS 文件。在构建过程中，PostCSS 解析你的 CSS 文件并将其转换为 Tailwind CSS 样式。JIT 模式Tailwind CSS 的 JIT 编译模式可以在开发过程中动态生成所需的样式类。这意味着只会生成你实际使用到的 CSS 类，从而减小最终的 CSS 文件大小并提高性能。并且Tailwind CSS 提供了方便的响应式设计工具。你可以通过添加断点前缀来指定不同屏幕尺寸下的样式。配置文件。
                                    Tailwind CSS允许在tailwind.config.js配置文件中自定义样式，如颜色、字体大小、边框宽度等。然后，这些自定义样式可以在HTML中通过类名引用，如text-custom-size。
                                    上一篇文章我们说过了如何搭建项目以及引入TailWindCSS，这篇文章我们说一下如何使用它，刚看到的时候我对这些缩写感觉很迷茫呀，官网我也没找到如何能知道具体对应的都是撒意思，后面找到一片天比较详细的介绍的文章，认真研究了一下，文章我会放在本文的最末尾。好啦话不多说，开始吧！1.screens(也可以自定义媒体查询屏幕的宽度)
一般都把颜色作为背景色、文字颜色或者边框颜色。举个🌰，green：
3.纵横比--aspect 
 4.容器--container
6.列--co.
Tailwind 是一个基于 Atomic/Utility-First 规范 CSS 框架，提供了基础的工具类 utility classes（如：内边距 padding、字体 text 和 font、动画 transition 等预设类），能直接在脚本标记语言中组合起来，构建出您想要的设计。
                                    Tailwind是一款CSS框架，它的主要特点是提供了一系列的CSS类，可以快速地构建出各种样式。Tailwind的发展历史可以追溯到2017年，由Adam Wathan、Steve Schoger和Jonathan Reinink共同创建。Tailwind的设计理念是提供一系列的原子类，每个类都只包含一个具体的样式，通过组合这些类来构建出复杂的样式。这种设计理念可以让开发者更加灵活地控制样式，同时也可以减少样式冗余，提高代码的可维护性。提供了一系列的原子类，可以快速地构建出各种样式。
                                    更好的阅读体验请移步至：zhengxiaoping.xyz/css/Tailwin…[1]安装以下方法是Vite + Vue模式下的安装方法，其他脚手架与框架的使用同理。创建项目pnpmcreateviteapp--templatevue
#yarncreateviteapp--templatevue
#npmcreateviteapp--templatevue