LEEDOM

Aug 14, 2021

tailwindcss

安装

# 安装tailwindcss postcss autoprefixer
# vanilla
$ npm install -D tailwindcss postcss-cli autoprefixer
# vue
$ npm install -D tailwindcss postcss autoprefixer
# 生成tailwindcss和postcss配置文件
$ npx tailwindcss init -p

引入

/*  
在项目资源目录下新建css文件,引入tailwindcss三大部件
./your-css-folder/styles.css
*/
@tailwind base;
@tailwind components;
@tailwind utilities;

配置

// 配置tailwindcss.config.js
module.exports = {
// 去除项目中没有用到的tailwindcss的css样式
purge: [
/* vue项目 */
'./dist/index.html',
'./src/**/*.{vue,js,ts,jsx,tsx}'
],
darkMode: false, // or 'media' or 'class'
theme: {
// 扩展自定义配置,不会覆盖tailwindcss原有样式
extend: {
flex: {
'2': '2 2 0%',
'3': '3 3 0%',
'4': '4 4 0%',
'5': '5 5 0%',
'8': '8 8 0%'
},
fontSize: {
'fs12': '12px'
}
},
},
variants: {
extend: {},
},
plugins: [],
}

demo

<template>
<h1 class="text-9xl text-center text-blue-600 sm:bg-black sm:text-white">tailwindcss</h1>
</template>
/* 可以使用@apply指令将所用到的功能类整合成一个自定义的类 */
<template>
<h1 class="intro">tailwindcss</h1>
</template>

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

.intro {
@apply text-9xl text-center text-blue-600 sm:bg-black sm:text-white;
}

PostCSS 7 兼容性版本

# 从 v2.0 版本开始,Tailwind CSS 依赖于 PostCSS 8。由于 PostCSS 8 才使用了几个月,因此生态系统中的许多其他工具尚未更新,这意味着在安装 Tailwind,并尝试编译 CSS 时,您可能会在终端中看到这样的错误:

$ Error: PostCSS plugin tailwindcss requires PostCSS 8.
# 如果遇到上述错误,请卸载 Tailwind 并使用兼容性版本重新安装:

$ npm uninstall tailwindcss postcss autoprefixer
$ npm install tailwindcss@npm:@tailwindcss/postcss7-compat @tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9
OLDER > < NEWER