关于tailwind-css: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 代码的程序员来说真的是一大福音。

参考链接：
tailwindcss 官网
知乎：Tailwind CSS、能让你少写很多代码的 css 工具库