关于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工具库

评论