开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第31天，点击查看活动详情

前言

传统的html+css开发存在一些问题

在项目开发中，通常需要指定一套标准的css变量，如果需求变化就需要维护巨大的变量组，增加了很大的负担。

不同的结构内容需要指定各种语义化的类名，再多人开发过程中也有很大负担。

维护html和css时，由于两者是分离的，需要在代码文件中上下寻找，或进行分屏操作，没有较好的开发体验。

针对一些响应式和主题切换，使用传统的html+css实现较为复杂

针对这些问题，tailwindcss是一个较好的解决方案

什么是tailwindcss

Tailwind CSS 是一个功能类优先的 CSS 框架，它集成了诸如 flex, pt-4, text-center 和 rotate-90 这样的的类，它们能直接在脚本标记语言中组合起来，构建出任何设计。

简单的理解就是为每个样式提供了一个指定的类名

我这里使用的时vue3 + vite构建的项目，对于不同的框架/工具，安装 Tailwind CSS 是完全不同的过程，详情访问官网

安装Tailwind以及依赖项

npm install -D tailwindcss@latest postcss@latest autoprefixer@latest

创建配置文件

npx tailwindcss init -p

可以看到根目录下新增了以上文件

指定 tailwind 应用范围

module.exports = {
  // tailwind 应用范围
  content: ["./index.html", "./src/**/*.{vue,js}"],
  theme: {
    extend: {},
  },
  plugins: [],
};

添加tailwindcss的指令

/src/styles/index.scss

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

引入指令

main.js

import "./styles/index.scss";

接着尝试在项目中使用tailwindcss

找到一个div添加以下类名

<div class="bg-red-900">测试</div>

如果该区域背景为红色即使用成功

为了更好的使用tailwindcss，可以在vscode中下载如下插件