Tailwind CSS的实践与VSCode高效使用指南（Vue2项目）如何在 Vue 2 项目中集成 Tailwind

写在前面

什么是原子化 CSS？

原子是什么？是化学反应中的最小粒子。 那么原子化 CSS 呢？顾名思义就是最小的 CSS。

原子化 CSS(Atomic CSS) 是一种用于设计和构建现代 Web 应用程序的 CSS 框架。它提出了一种将 CSS 拆分为更小、更可维护的部分的方法，以便更好地组织和管理 CSS 代码。在原子化 CSS 中，CSS 组件被拆分为更小的部分，这些部分可以独立地编辑、测试和重用。这些原子通常是单个像素或极其微小的变化，例如颜色、大小、位置等。

原子化 CSS 的优点

提高可维护性：通过将 CSS 拆分为更小的部分，可以更容易地管理和维护代码，减少样式冲突。
增强可重用性：原子类可以跨项目重用，减少重复代码，提高开发效率。
更好的性能：由于原子类通常非常小且具体，可以减少 CSS 文件的大小，从而提高页面加载速度。
适应性强：原子化 CSS 可以很容易地适应不同的设计系统和需求，使得样式调整更加灵活。

CSS框架流行趋势

state-2023中满意度最高的 CSS 框架就是 Tailwind CSS ，并且近几年一直高居榜首。因此Tailwind CSS作为首个css原子化框架使用成为了我们的首选。我们也的确可以看出Tailwind CSS 在过去几年的流行程度一直保持一个高速增长的态势，可见其原子化 CSS 的特性的确很好用。

Tailwind CSS 简介

Tailwind CSS 是 utility-first(功能类优先) 的 CSS 框架，它提供了一套预定义的原子类，开发者可以直接在 HTML 中使用这些类来构建界面，而无需编写自定义的 CSS 代码。

Tailwind CSS 的优点

快速开发：通过直接在 HTML 中使用预定义的类，可以大大加快开发速度，减少编写和调试 CSS 的时间。
一致性：由于所有的样式都是通过预定义的类来实现的，可以确保整个项目的一致性，减少样式不一致的问题。
性能优化：Tailwind CSS 使用了 JIT 技术，只生成实际使用到的样式，从而减少打包后的 CSS 文件大小，提高页面加载速度。
设计系统友好：Tailwind CSS 的有限原子功能类集合天然契合设计系统，可以很容易地适配任何设计系统。

Tailwind CSS 的实现原理

Tailwind CSS 的核心在于其原子化的设计理念和 JIT（Just-In-Time）编译模式。它通过 PostCSS 插件在构建过程中动态生成所需的 CSS 类，而不是预先生成所有可能的类。这种方式不仅减少了 CSS 文件的大小，还确保了样式的灵活性和可维护性。

Vue 2 老项目接入指南

Tailwind CSS 最新版并不支持 Vue 2，因为 Tailwind CSS 基于 postcss，而 Vue 2 中则是内置了 postcss 7。因此我们只能使用 v2 版本。

在 Vue 2 中安装 `Tailwind CSS`

首先我们需要固定依赖版本，安装依赖：

npm install tailwindcss@npm:@tailwindcss/postcss7-compat @tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9

然后创建 tailwind.css 文件夹，可根据项目目录结构放当适当文件夹即可，src/assets 或 src/styles 可根据情况选择，我选择了单独的 styles 文件夹：

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

接下来引入 main.js 中：

import Vue from 'vue'
import App from './App'
import router from './router'
import '@/styles/tailwindcss.css'

new Vue({
  el: '#app',
  router,
  render: (h) => h(App)
})

初始化 tailwind.config.js，直接执行脚本命令：

npx tailwindcss init

根据需要配置基础 purge：

/** @type {import('tailwindcss').Config} */
module.exports = {
  purge: ['./src/**/*.{js,jsx,vue}'],
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {}
  },
  variants: {},
  plugins: []
}

关键步骤 - 配置 vue.config.js：

module.exports = {
  css: {
    loaderOptions: {
      postcss: {
        plugins: [require('tailwindcss'), require('autoprefixer')]
      }
    }
  }
}

至此大功告成配置基本完成，即可体验 Tailwind CSS 的魅力。

添加 VSCode 扩展提升体验

Tailwind CSS IntelliSense 代码提示插件：类名的智能建议，以及 CSS 函数和指令。

将鼠标悬停在 TailWind 类名上，查看完整的 CSS。

Tailwind Fold 折叠 CSS 插件，增强阅读体验。

总结

至此，Tailwind CSS 可以愉快的在 Vue 2 项目中使用，但是需要注意，阅读文档时候要切换到 v2 版本。

如果想体验更好的原子化 CSS 带来的便利，还是尽快将项目升级到 Vue 3 版本。

Tailwind CSS的实践与VSCode高效使用指南（Vue2项目）