tailwind落地方案

安装流程

相关依赖

tailwind官方提供vscode依赖Tailwind CSS IntelliSense，可以识别tailwind中的className，非常好用。

基础配置

根据tailwind推荐的安装方式，通过postcss进行集成

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init

生成tailwind.config.js也就是tailwind的配置文件，关于详细的tailwind配置,计划在后续的项目完善中持续补充。

这里先配置一个基础项content: 标明tailwind处理的文件路径以及类别

/** @type {import('tailwindcss').Config} */
export default {
    // 处理src下的所有html,js,vue文件
    content: ["./src/**/*.{html,js,vue}"],
    // theme类似与自定义的变量，配合theme方法使用，详细说明（https://tailwindcss.com/docs/configuration）
    theme: {
        extend: {},
    },
    plugins: [],
}

创建一个css入口文件，并写入如下配置

// main.css文件
@tailwind base;
@tailwind components;
@tailwind utilities;

并在入口html中引入该文件：

// index.html文件
<link rel="stylesheet" href="./main.css">

再使用pnpm run dev运行项目。

此时可以发现，mian.css中的内容已被tailwind重写为tailwind的默认样式和按需引入的class两部分

其他插件介绍

• postcss-import： 允许tailwind.css使用@import引入其他文件

注意@import必须放在文件首部，上面的写法会产生报错

使用@import "tailwindcss/base"代替@tailwind base,其实在tailwind的node_modules中可以找到tailwindcss/base里面的内容就是@tailwind base

所以这里只是换成了@imprt的写法

• tailwindcss/nesting: tailwind的内置插件，无需安装。并充当兼容性层，以确保嵌套插件正确理解Tailwind的自定义语法，如@apply和@screen（这一点不是很明白，决定先不适用这个，看看会出什么问题）
• Autoprefixer.: 处理css兼容前缀
• cssnano css的压缩工具
• Brotli

这些配置上去后，基础的tailwind落地便已实现，后续还需要根据项目需求做对应的调整

参考文档

*tailwindcss.com/