Vue2中使用tailwindcss

第一步、创建项目

vue create test-tailwindcss

第二步、安装tailwind css

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

会有警告，不用管。

第三步、创建配置文件

# 创建一个空的tainwind css配置文件
npx tailwindcss init
# or
# 你也可以创建一个包含有所有默认配置的文件（东西太多了，不推荐）
npx tailwindcss init -fill

第四步、使用postcss文件

postcss@7 版本需要自己创建，@8版本会再npx tailwindcss init 的时候自己创建
在项目根目录下创建postcss.config.js文件

// postcss.config.js
module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  }
}

第五步、创建tailwindcss文件

在 assets 文件夹下创建 tailwendcss.css文件

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

在main.js中引入

import '@/assets/tailwindcss.css'

第六步、运行起来

可以看到logo已经偏移了

给img 加上inline-block这个类名即可

<!-- src/app.vue --> 
<img class="inline-block" alt="Vue logo" src="./assets/logo.png">

我们再给src/components/HelloWorld.vue加点颜色看看。

<!-- src/components/HelloWorld.vue -->    
<h1 class="font-semibold text-5xl text-red-700" >{{ msg }}</h1>

总结
tailwind css 极大地简化了响应式代码的编写，默认了一些很好看的样式class，对于不喜欢写css代码的程序员来说真的是一大福音。