TailwindCSS简介和使用方法

TailwindCSS简介

在Vue开发中，在项目越来越大后，面对分散在各个组件的，甚至是一个写的较大的单vue文件里，要查询到DOM元素对应的class类并维护，是一个费时费力的工程。而TailwindCSS，通过将CSS属性直接包装为类名，来大幅度简化开发和维护的工作量。

从这样：

<script setup>

</script>

<template>
<div class="main_body">
    <h1>1111</h1>
</div>
</template>

<style>
.main_body{
    width: 500px;
    height: 100px;
    border: 1px solid black;
    margin: auto;
    display: flex;
    justify-content:center;
}
</style>

到这样：

<script setup>

</script>

<template>
<div class="main_body w-50 h-25 border-1 border-black flex justify-center m-auto">
    <h1>1111</h1>
</div>
</template>

可以很直观的看到，减少了繁琐的CSS代码，使得文件更加美观，也更利于维护。

如何使用？

1、安装依赖。

使用命令：
npm install -D tailwindcss @tailwindcss/vite
或
pnpm install -D tailwindcss @tailwindcss/vite
取决于你在新建Vue项目时用的是pnpm还是npm

2、配置Vite插件

打开项目根目录下的 vite.config.js（或 .ts）文件，导入并添加 Tailwind CSS 插件：

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import tailwindcss from '@tailwindcss/vite' // 导入插件

export default defineConfig({
plugins: [
  vue(),
  tailwindcss(), // 启用插件
],
})

3、在CSS中导入Tailwind

在主css文件中导入
@import "tailwindcss";
如果没有src/style.css 或 src/assets/main.css等主css文件，则新建任意一个

4、在 Vue 入口文件中引入 CSS

在main.js中使用import './assets/main.css'或import './style.css'来引入

完成以上步骤后，便可以开始使用TailwindCSS进行开发。

---

Q1、TailwindCSS有哪些类名？如何查找？

有多少CSS属性，TailwindCSS就有多少类名，除了通过官网https://www.tailwindcss.cn/ (十分不推荐）外，还可以在VS Code中安装Tailwind CSS IntelliSense，通过代码提示来简化开发。

Q2、使用TailwindCSS后，类名是否会过长？如果我要通过类名来操作DOM，会不会找不到类名？

尽管在Vue开发中已经很少使用类名（或id）来操纵DOM了，但你可以通过将类名前置来方便查询类名
例如：

<script setup>

</script>

<template>
<div class="main_body w-50 h-25 border-1 border-black flex justify-center m-auto">
    <!--上面的main_body是类名-->
    <h1>1111</h1>
</div>
</template>

Q3、使用TailwindCSS后，还能否使用style代码块？

可以混用，不影响实际运行

作者：RCCS_1154
出处：http://www.cnblogs.com/RCCS/
本文版权归作者和博客园共有，转载必须给出原文链接，并保留此段声明，否则保留追究法律责任的权利。