小知识，大挑战！本文正在参与“程序员必备小知识”创作活动。
前言
相信大家在开发中都用过不少的CSS样式库，例如Bootstrap,BootMetro，Muse UI等等... 那么今天给大家介绍一个充满设计感的当红框架---Tailwind CSS。
Tailwind CSS是什么？
Tailwind CSS是一个CSS样式库，它为我们提供了构建定制设计而无需使用自定义样式所需的所有构建块，在国外是一个比较热门的框架。
Tailwind提供了充满设计感和实用程序至上的能力来创建组件，它非常适合提供美观且实用的类名来构建网站，并且它在最新的2.0版本中加入了深色模式，开箱即用，无需配置。
Tailwind在构建生产文件时会自动删除所有未使用的CSS，所以它在实际生产环境上的体积非常小，它被认为是最富有设计感的CSS样式库，并且，连尤大都fork了，我们还不行动起来嘛
Tailwind与其他样式库的区别
1.可定制
在tailwind.config.js配置文件中，可以自定义项目的调色板color、间距spacing、字体fontFamily、断点breakpoints、边框半径值borderRadius等。
// tailwind.config.js
module.exports = {
theme: {
colors: {
blue: {
light: '#85d7ff',
DEFAULT: '#1fb6ff',
dark: '#009eeb',
},
pink: {
light: '#ff7ce5',
DEFAULT: '#ff49db',
dark: '#ff16d1',
},
gray: {
darkest: '#1f2d3d',
dark: '#3c4858',
DEFAULT: '#c0ccda',
light: '#e0e6ed',
lightest: '#f9fafc',
}
},
fontFamily: {
sans: ['Graphik', 'sans-serif'],
serif: ['Merriweather', 'serif'],
},
extend: {
spacing: {
'128': '32rem',
'144': '36rem',
},
borderRadius: {
'xl': '0.5rem',
'2xl': '1rem',
'3xl': '1.5rem',
'4xl': '2rem',
}
}
}
}
2. 响应式
Tailwind提供了断点breakpoints供用户根据不同的设备配置响应式布局，默认断点为常见设备的分辨率
// tailwind.config.js
module.exports = {
theme: {
screens: {
'sm': '640px',
// => @media (min-width: 640px) { ... }
'md': '768px',
// => @media (min-width: 768px) { ... }
'lg': '1024px',
// => @media (min-width: 1024px) { ... }
'xl': '1280px',
// => @media (min-width: 1280px) { ... }
'2xl': '1536px',
// => @media (min-width: 1536px) { ... }
}
}
}
它提供给用户设置在不同的设备大小中展示不同的布局效果，比如下面这个小例子：
<div class="w-20 h-20 bg-red-200 sm:bg-blue-500 md:bg-yellow-500"></div>
它展示的是一个宽为5rem(80px)，高为2.5rem(40px)，在设备宽度小于640px时颜色为粉红色bg-red-200
设备宽度为640px到768px之间时为蓝色sm:bg-blue-500
当设备宽度大于768px时显示为橙色
md:bg-yellow-500
3.提取共用属性
也许你会觉得在标签上写那么多class看起来太乱了，这个时候你可以使用特殊语法@apply将属性提取出来，例如提取刚才的div中的class：
/* index.css */
/*! @import */
@tailwind base;
@tailwind components;
@tailwind utilities;
.box {
@apply w-20 h-20 bg-red-200 sm:bg-blue-500 md:bg-yellow-500
}
然后就直接给div加上box属性即可
<div class="title"></div>
在Vue3+Vite项目中使用Tailwind CSS
创建vite项目
npx create-vite-app vite_vue3
cd vite_vue3
npm install
安装 Tailwind 以及其它依赖项:
npm install -D tailwindcss@npm:@tailwindcss/postcss7-compat @tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9
创建配置文件
npx tailwindcss init -p
配置 Tailwind 来移除生产环境下没有使用到的样式声明
// tainwind.config.js
module.exports = {
purge: ['./index.html', './src/**/*.{vue,js,ts,jsx,tsx}'],
darkMode: false, // or 'media' or 'class'
theme: {
extend: {},
},
variants: {
extend: {},
},
plugins: [],
}
在CSS中引入Tailwind
/* index.css */
/*! @import */
@tailwind base;
@tailwind components;
@tailwind utilities;
由于 Chromium 中的 bug ，请确保包含
/*！@import */注释，以避免开发时在 Chrome DevTools 中出现的性能问题。
在main.js中导入index.css文件
// main.js
import { createApp } from 'vue'
import App from './App.vue'
import './index.css'
createApp(App).mount('#app')
至此，我们就完成了tailwind的引入啦，按照示例简单尝试一下吧~
