第一步、创立我的项目
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.jsmodule.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工具库