tailwindcss保姆级教程(纯代码)

当前教程适用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. 安装tailwindcss依赖

npm install -D tailwindcss

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

npx tailwindcss init

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

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./src/**/*.{html,js,vue}"],
  theme: {
    extend: {},
  },
  plugins: [],
}

4. 创建src/assets/input.css文件

input.css内容

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

5. 生成CSS样式文件

终端执行命令

npx tailwindcss -i ./src/assets/input.css -o ./src/assets/output.css --watch

注意!!!

命令npx tailwindcss -i 'a文件地址' -o 'b文件地址' --watch中的'a文件地址'一定要是我们在步骤6中创建的 tailwindcss文件，b文件一定要与步骤8中全局引入样式文件的地址一致

生成/src/assets/output.css文件

6. 在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')

7. 使用tailwindcss

下面大家可以用这个demo修改src/app.vue的内容验证一下

<template>
  <div id="app">
    <h1 class="text-3xl font-bold underline">
      Hello world!
    </h1>
    <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>
    </div>
  </div>
</template>
​
<script>
export default {
  name: 'App',
  components: {
​
  }
}
</script>
​
<style></style>

10. 运行项目

新建一个终端执行npm run serve运行项目

页面样式如下：

10. 最后的强调

我们在调试的时候，要保持步骤7命令的持续运行，否则tailwindcss无法实现解析项目中新增的CSS样式 和 变更output.css文件中的 原子化CSS 标签，导致样式不生效。

跑两个终端一个用于解析tailwindcss，一个用于跑项目就可以解决啦

文章中有问题 或 实践中出现问题 欢迎大家一起指正，讨论！