vue3 集成 tailwindcss

tailwindcss 介绍

Tailwind CSS 是一个流行的前端框架，用于构建现代、响应式的网页和 Web 应用程序。它的设计理念是提供一组可复用的简单、低级别的 CSS 类，这些类可以直接应用到 HTML 元素上，从而加速开发过程并提高样式一致性。

主要特点如下：

1. 原子级别的 CSS 类: Tailwind CSS 的核心思想是将样式拆分为原子级别的类，每个类都代表一个特定的样式属性，例如 text-center 用于文本居中对齐，bg-blue-500 用于设置背景颜色为蓝色。通过将这些类应用于 HTML 元素，可以构建精确的样式。
2. 可配置: Tailwind CSS 允许你在配置文件中自定义样式属性，以满足项目的需求。你可以定义颜色、字体、间距、边框等等，以及响应式断点，使样式能够根据屏幕大小适应。
3. 响应式设计: Tailwind CSS 支持响应式设计，你可以根据不同的屏幕宽度应用不同的样式类。例如，你可以使用 md:text-lg 类来指定在中等屏幕尺寸上使用较大的文本字号。
4. 插件系统: Tailwind CSS 具有丰富的插件生态系统，你可以轻松地扩展框架的功能，以满足项目的特定需求。这些插件可以用于添加自定义样式、工具类或组件。
5. 构建工具集成: Tailwind CSS 可以与构建工具（如Webpack、Parcel、PostCSS）无缝集成，使你能够自动化构建过程并优化生产代码。
6. 社区支持: Tailwind CSS 拥有庞大的社区，因此你可以轻松找到教程、文档、示例和第三方插件，以帮助你更快地上手和开发。

Tailwind CSS 通过提供可复用的原子级别的 CSS 类，简化了前端开发的样式管理，使开发人员能够更高效地构建现代、响应式的用户界面。它适用于各种项目，从小型网站到大型 Web 应用程序，因为它提供了高度的灵活性和可定制性。

安装 tailwindcss

npm install -D tailwindcss postcss autoprefixer

安装完成后，在根目录执行初始化命令：

npx tailwindcss init -p 
// -p 代表配置

执行完成后，可以看到如下目录：

有如上两个文件生成，代码成功

配置 tailwindcss

tailwind.config.js

原本 2.0 的 purge 在 3.0 改成 content

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

style.css

将原本在 src/style.css 里面内容清空，然后放入如下的 TailwindCSS 的核心内容，这样可以避免再新建一个 index.css 在 main.ts 中引入，因为 style.css 默认会引入到 main.ts 中

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

测试使用效果

随便找一个 tsx 或 vue 的 模板文件，这里以 tsx 为例子：

import {defineComponent} from "vue";
import Button from '@opentiny/vue-button'
const HelloWorld = defineComponent({
name: 'HelloWorld',
 
    setup() {
    },
 
    render() {
 
    return (
        <div >
 
            <div class="text-center bg-gray-100 p-5">
                <p class="text-6xl  text-red-700">Hello!</p>
                <h1 class="text-4xl text-green-500">Vite + TailwindCSS</h1>
            </div>
          
        </div>
    )
 
}
 
})
 
export default HelloWorld

然后执行 npm run dev ，看效果，就成功了

配置IDEA中自动提示

如果 idea 不提示 tailwindcss 的标签，那么可以尝试将安装postcss的版本降低到2.1.4
 
npm i @tailwindcss/postcss7-compat@2.1.4 --save
npm i tailwindcss@latest --save 

此外，插件市场记得安装下面的三个插件，这样提示效果会更加全面：

参考：https://intellij-support.jetbrains.com/hc/en-us/community/posts/4403640816274-Vue-Tailwind-no-autosuggestions-in-WebStorm-