Tailwind 安装使用
前言
CSS原子化——本文将详细介绍如何在Vue + Vite + npm环境下安装、配置并使用Tailwind CSS！
文章目录
一、Tailwind 在 Vue + Vite 项目中的安装
1. 创建Vue项目
如果您已经有了项目可以掠过这一步 ,从 2 开始
首先，确保你的机器上已安装Node.js和npm。然后，使用Vite创建一个新的Vue项目：
npm create vite@latest my-vue-app --template vue
cd my-vue-app
2. 安装Tailwind CSS
接下来，在项目根目录下安装Tailwind CSS及其依赖项：
npm install tailwindcss postcss autoprefixer
3. 初始化Tailwind配置
安装完成后，使用Tailwind的初始化命令生成配置文件：
npx tailwindcss init -p
这个命令将生成tailwind.config.js和postcss.config.js两个文件。tailwind.config.js用于自定义Tailwind的配置，而postcss.config.js则配置了PostCSS，这是Tailwind编译所必需的。
4. 修改文件 tailwind.config.js
配置 ·tailwind.config.js 文件 直接复制下面代码·
/*** tailwind.config.js **/
/** @type {import('tailwindcss').Config} */
export default {
content: [
"./index.html",
"./src/**/*.{vue,js,ts,jsx,tsx}",
],
theme: {
extend: {},
},
plugins: [],
}
5. 修改 style.css
配置 ·style.css 文件 需要在style.css 文件中添加下面代码·
@tailwind base;
@tailwind components;
@tailwind utilities;
恭喜您，至此安装完成！！！！！
项目对应大至目录：
二、编译器配置
这里主要是针对 VScode 、Webstorm 等编译器插件安装
这里很有必要哦，会增加代码class 提示哈~~
webstorm 一定要注意版本，··注意：webstorm 2021 以下 ,的不予支持哦
直接上图：
直接插件市场安装即可！！
三、如何使用Tailwind（代码块示例）
现在，我们可以在Vue组件中使用Tailwind的类名来应用样式。以下是一个简单的Vue组件示例，展示了如何使用Tailwind构建一个基本的按钮：
<template>
<div class="container mx-auto">
<button class="bg-blue-500 text-white font-bold py-2 px-4 rounded">
Click Me
</button>
</div>
</template>
<script>
export default {
name: 'MyButton'
}
</script>
点这里—中文文档 哦！！
点这里—中文文档 哦！！
点这里—中文文档 哦！！
点这里—中文文档 哦！！
四、注意事项
- 避免样式冲突：在Vue项目中，确保Tailwind的样式与其他CSS库或自定义样式不产生冲突。可以通过调整Tailwind的配置或使用
@apply指令来定制样式。 - 响应式设计：充分利用Tailwind的响应式设计工具，如
sm:,md:,lg:,xl:等前缀，来创建适应不同屏幕尺寸的样式。 - 性能优化：在生产环境中，确保启用了PurgeCSS来去除未使用的CSS，以减少文件大小和提高加载速度。你可以在
tailwind.config.js文件中配置PurgeCSS。
五、优缺点
优点：
- 高度可定制：通过
tailwind.config.js文件，你可以轻松定制Tailwind的样式、颜色方案和其他配置。 - 开发效率高：原子化的类名使得样式的调整变得快速而简单，大大提高了开发效率。
- 与Vue/Vite无缝集成：Tailwind与Vue/Vite的集成非常顺畅，无需额外的配置或插件。
缺点：
- 学习曲线：对于初学者来说，Tailwind长时间使用可能导致自己css基础不牢固，建议慎用！
- HTML膨胀：过度使用Tailwind可能导致HTML代码变得冗长。因此，建议结合自定义CSS和Tailwind的类名来达到最佳效果。
六、总结
本文主要介绍了css 原子化的最常用框架，tailwind, 针对这个框架，大家看法褒贬不一，但是博主任务作为前端开发不管您是否使用，但是对于这种工程化的框架还是要了解一些，毕竟面试很多面试官会问到，希望大家最起码也要有个了解~
看到这里的小伙伴，欢迎点赞、评论，收藏！
如有前端相关疑问，博主会在第一时间解答，也同样欢迎添加博主好友，共同进步！！！