tailwindcss保姆级教程(完整版带解析)

影白

已于 2024-05-18 12:48:38 修改

阅读量1.8k

点赞数 22

文章标签： css vue

于 2024-05-18 12:28:16 首次发布

本文链接：https://blog.csdn.net/yingbbai/article/details/139023273

版权

前端基础 —— CSS基础专栏收录该内容

1 篇文章 0 订阅

订阅专栏

当前教程适用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!
    </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>