Tailwind 安装使用

前言

CSS原子化——本文将详细介绍如何在Vue + Vite + npm环境下安装、配置并使用Tailwind CSS！

在这里插入图片描述

文章目录

Tailwind 安装使用
- 前言
- 一、Tailwind 在 Vue + Vite 项目中的安装
- - 1. 创建Vue项目
  - 2. 安装Tailwind CSS
  - 3. 初始化Tailwind配置
  - 4. 修改文件 tailwind.config.js
  - 5. 修改 style.css
- 二、编译器配置
- 三、如何使用Tailwind（代码块示例）
- 四、注意事项
- 五、优缺点
- 六、总结

一、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。