TailwindCss样式框架 + vue 快速上手及注意事项

Tailwind css框架介绍

Tailwind是一个行内样式库，就是将各种各样的class集成好，在使用时只需要在html中的class内写行内样式即可 例如 :
<div class="bg-red text-blue-500"> bigyellow </div>
就可以为这个div添加一个红色背景颜色和一个蓝色字体

以下为官方介绍:

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

官网链接 TailwindCss官网

Tailwind css 的使用（vue）

在vue项目的根目录 终端 输入以下命令,安装 Tailwind css 以及tailwind所依赖的两个css工具库 postcss autoprefixer

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

在vue项目的根目录终端中输入以下命令，初始化tailwind

npx tailwindcss-cli@latest init

在 main.js 中引入tailwind css

import "tailwindcss/tailwind.css"

接着在 vue.config.js 中添加webpack配置

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

这时候tailwind已经在vue项目中引入好了，在vue项目的根目录下新增了一个tailwindcss的配置文件tailwind.config.js，可以在页面中按照官网的class写点简单代码测试一下是否安装成功

Vscode（tailwindcss）相关插件

工欲善其事，必先利其器，在安装完成后我们还可以再提升一下tailwind的开发效率，在vscode中安装如下图所示插件，可以为我们开发时提供tailwind相关的代码提示。

注意事项

在安装 Tailwind css IntelliSense 插件后，记得把其他的css提示插件卸载一下，例如下图插件，因为在我使用的过程中，有其他 css插件 和 Tailwind css IntelliSense 相互冲突，导致每次vscode打开后占用内存非常高，甚至直接卡死。当然如果你 当前使用并无异常也可以同时使用多个css插件，仅作为一个自查方案

在开发的时候如果发现直接在class中输入样式并无代码提示记得先 敲一个空格，这时候tailwind的代码提示就出来了

最后

如果我的文章对你有帮助可以点个赞或者关注一下噢！