当前教程适用vite以及vue-cli搭建的vue2，vue3项目，(node版本限制暂未验证，目前本人使用的是14.21.2版本的node，如遇问题可以尝试对齐一下版本，uni-app框架适配验证中...)，下述教程以vue2从零搭建项目开始

官网地址： 安装 - TailwindCSS中文文档 | TailwindCSS中文网

tailwindcss语法参考： Tailwind CSS - 只需书写 HTML 代码，无需书写 CSS，即可快速构建美观的网站。 | TailwindCSS中文文档 | TailwindCSS中文网 往下滑就可以看到了，不完整，后续会专门出个教程补充

tailwindcss保姆级教程(纯代码)： tailwindcss保姆级教程(纯代码)-CSDN博客

1. 创建一个名叫demo的vue2项目

vue create demo

2. 安装项目依赖

npm i

3. 安装tailwindcss依赖

npm install -D tailwindcss

4. 创建tailwindcs的配置文件tailwind.config.js

npx tailwindcss init

5. 修改配置文件tailwind.config.js的配置

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./src/**/*.{html,js,vue}"],
  theme: {
    extend: {},
  plugins: [],
 
备注：tailwind.config.js为了生成样式 会扫描 项目中用到的css样式 的文件，扫描的文件地址配置即匹配content: ["./src/**/*.{html,js,vue}"](项目根目录下的src中一级目录及二级目录下所有以html,js,vue结尾的文件)的结果，大家可以根据自己的项目需求具体调整 扫描文件
 
6. 创建tailwindcss样式解析入口文件
 
创建位置：src/assets/input.css
 
input.css内容
 
@tailwind base;
@tailwind components;
@tailwind utilities;
 
 
这是 Tailwind解析CSS 的指令入口文件，下面我们在进行CSS样式构建的时候会从这个文件进入，然后输出匹配到项目中使用了的 原子化 css 标签属性
 
7. 生成CSS样式文件
 
终端执行命令
 
npx tailwindcss -i ./src/assets/input.css -o ./src/assets/output.css --watch
 
 
注意!!!
 
 
命令npx tailwindcss -i 'a文件地址' -o 'b文件地址' --watch中的'a文件地址'一定要是我们在步骤6中创建的 tailwindcss样式解析入口文件
 
 
出口文件不做限制，可以自己定义，但一定要与步骤8中全局引入样式文件的地址一致
 
会生成项目中用到的 原子化CSS标签相关文件output，如下图：
 
8. 在src/main.js中全局引入 输出的样式文件output.css
 
// src/main.js
import Vue from 'vue'
import App from './App.vue'
import '@/assets/output.css'  // 全局引入样式文件
Vue.config.productionTip = false
new Vue({
  render: h => h(App),
}).$mount('#app')
 
怕小白找不到，附个图：
 
9. 使用tailwindcss
 
现在我们就可以在项目中使用tailwindcss啦
 
下面大家可以用这个demo修改src/app.vue的内容验证一下
 
<template>
  <div id="app">
    <h1 class="text-3xl font-bold underline">
      Hello world!
    <div class="w-96 bg-white shadow rounded">111</div>
    <div class="grid grid-cols-10 gap-2">
      <div class="bg-sky-50 aspect-square"></div>
      <div class="bg-sky-100 aspect-square"></div>
      <div class="bg-sky-200 aspect-square"></div>
      <div class="bg-sky-300 aspect-square"></div>
      <div class="bg-sky-400 aspect-square"></div>
      <div class="bg-sky-500 aspect-square"></div>
      <div class="bg-sky-600 aspect-square"></div>
      <div class="bg-sky-700 aspect-square"></div>
      <div class="bg-sky-800 aspect-square"></div>
      <div class="bg-sky-900 aspect-square"></div>
</template>
<script>
export default {
  name: 'App',
  components: {
</script>
<style></style>
 
10. 运行项目
 
因为此时终端被tailwindcss解析指令占据，我们新建一个终端用于运行项目
 
npm run serve
 
页面样式如下：
 
10. 最后的强调
 
我们在调试的时候，要保持步骤7命令的持续运行，否则tailwindcss无法实现解析项目中新增的CSS样式 和 变更output.css文件中的 原子化CSS 标签，导致样式不生效。
 
跑两个终端一个用于解析tailwindcss，一个用于跑项目就可以解决啦
 
文章中有问题 或 实践中出现问题 欢迎大家一起指正，讨论！
				
更好的阅读体验请移步至：zhengxiaoping.xyz/css/Tailwin…[1]安装以下方法是Vite + Vue模式下的安装方法，其他脚手架与框架的使用同理。创建项目pnpmcreateviteapp--templatevue
#yarncreateviteapp--templatevue
#npmcreateviteapp--templatevue
				
上一篇文章我们说过了如何搭建项目以及引入TailWindCSS，这篇文章我们说一下如何使用它，刚看到的时候我对这些缩写感觉很迷茫呀，官网我也没找到如何能知道具体对应的都是撒意思，后面找到一片天比较详细的介绍的文章，认真研究了一下，文章我会放在本文的最末尾。好啦话不多说，开始吧！1.screens(也可以自定义媒体查询屏幕的宽度)
一般都把颜色作为背景色、文字颜色或者边框颜色。举个🌰，green：
3.纵横比--aspect 
 4.容器--container
6.列--co.