一.什么是Tailwind CSS
Tailwind CSS是一种实用工具-基于低级别的CSS框架。其他CSS框架（例如Bootstrap，Foundation，Bulma等）为你提供了各种预定义的组件（例如模式，按钮，警报，卡片）。但TailwindCSS可以做你自己组件，或者根据你的项目模型设计，换一种说法，你实际上是拥有自己开发组件的能力，然后可以利用自己选择的任何组件上的自定义功能，这意味着不再需要与该框架作斗争，而试图找出需要重写哪些类才能获得最初目标的结果。
二.为什么选择Tailwind CSS
2.1 大多数 CSS 框架包揽了太多工作
大多数css框架在需要定制化的时候，会不太友好，最常见是要写deep,或者important，费劲心力去覆盖内建的样式；而Tailwind是提供更基础的工具类，可以让我们在HTML源码上构建一个完全定制化的设计。
2.2 天生就支持响应式布局
Tailwind的每一个工具类都支持响应式布局，只需要使用更直观的类似 {screen}: 的命名前缀，这样可以很容易地注意到哪些是响应式类，同时还能保持原始类名的可识别性和完整性。
<div class="justify-start sm:justify-center md:justify-end lg:justify-between xl:justify-around ...">
<!-- ... -->
</div>
2.3 组件友好
Tailwind提供了从重复模式中提取组件的工具，使得修改一处代码能够容易地更新多个实例
2.4 天生可定制
基本样式比如颜色、边框尺寸、字体粗细、间距、断电、阴影等等都可以定制。Tailwind 是基于 PostCSS（是一款使用插件去转换CSS的工具） 开发的，通过 JavaScript代码进行配置，这意味着你可以完全发挥真正的编程语言的能力。
2.5 控制文件体积
若使用默认配置，生成的 CSS 文件保持体积小并且功能完整，体积如下：
| Uncompressed | Minified | Gzip | Brotli |
|---|---|---|---|
| 1996.1kb | 1599.8kb | 144.6kb | 37.6kb |
2.6 浏览器支持
它的定位是一个高度可定制的基础层CSS框架，其实没有兼容性问题，根据不同浏览器支持的样式去写就可。
三.安装及配置
3.1 安装
# Using npm
npm install tailwindcss
# Using Yarn
yarn add tailwindcss
CDN的方式：
<link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet">
如果没有将Tailwind整合到构建过程中（使用CDN引入的方式），许多让Tailwind CSS变得很好的特性是不可用的。不能自定义Tailwind的默认主题，也不能使用任何像@apply这样的指令等
3.2 将 Tailwind 添加到你的 CSS 代码中
@tailwind base;
@tailwind components;
@tailwind utilities;
如果你正在使用postcss-import(或者一个在后台使用它的工具，比如Rails的Webpacker)，使用我们的import而不是@tailwind指令来避免在导入任何你自己的附加文件时出现问题
@import "tailwindcss/base";
@import "tailwindcss/components";
@import "tailwindcss/utilities";
3.3 生成Tailwind CSS的配置文件
如果你想定制你的Tailwind安装，你可以在安装tailwindcss npm包时使用Tailwind CLI工具为你的项目生成一个配置文件
npx tailwindcss init
这将在项目的根目录中创建一个最小的tailwind.config.js文件
module.exports = {
future: {
// removeDeprecatedGapUtilities: true,
// purgeLayersByDefault: true,
},
purge: [],
theme: {
extend: {},
},
variants: {},
plugins: [],
}
可以在这个文件中修改一些默认配置（Theme、Variants、Plugins、Prefix、Important、Separator、corePlugins）例如：
theme: {
screens: {
'sm': '640px',
'md': '768px',
'lg': '1024px',
'xl': '1280px',
},
fontFamily: {
display: ['Gilroy', 'sans-serif'],
body: ['Graphik', 'sans-serif'],
},
extend: {
colors: {
cyan: '#9cdbff',
},
margin: {
'96': '24rem',
'128': '32rem',
},
}
},
variants: {
opacity: ['responsive', 'hover']
}，
prefix: 'tw-', // 前缀
在使用prefix时需要注意的是，这个前缀是添加到每个实用程序名的开头，而不是添加到整个类名的，理解这一点很重要。这意味着具有响应性或状态前缀(如sm:或hover:)的类将仍然将响应性或状态前缀放在前面，而您自定义的前缀出现在冒号之后，例如：
<div class="tw-text-lg md:tw-text-xl tw-bg-red-500 hover:tw-bg-blue-500">
<!-- -->
</div>
并且prefix前缀只添加到Tailwind生成的类中;不会在自己的自定义类中添加任何前缀。
未修改的配置见 默认配置
一般情况下，配置文件应尽可能少，只需要指定想定制的东西即可。如果在一些情况下需要构建一个完整的配置文件，其中包括所有的Tailwind默认配置，可使用以下命令：
npx tailwindcss init --full
3.4 用 tailwind 处理 css
以VUE Cli3.*为例，在postcss.config.js中配置：
module.exports = {
plugins: [require("tailwindcss"), require("autoprefixer")],
};
其他环境下的配置参考官方文档Tailwind 安装
四.使用
4.1 函数与指令
4.1.1 @tailwind
使用@tailwind指令将Tailwind的基础（base）、组件（components）、工具（utilities）和屏幕（screens）样式插入到项目的CSS中
@tailwind base;
@tailwind components;
@tailwind utilities;
@tailwind screens;
4.1.2 @apply
使用@apply将任何现有的实用程序类内联到自己的定制CSS中。当需要在HTML中找到要提取到新组件的通用实用程序模式时，这非常有用。
其实就是整合tailwind提供的样式，提取为自己项目中需要用的样式。
.btn {
@apply font-bold py-2 px-4 rounded;
}
.btn-blue {
@apply bg-blue-500 text-white;
}
.btn-blue:hover {
@apply bg-blue-700;
}
4.1.3 @variants
可以通过在@variant指令中包装它们的定义来生成hover, focus, active等样式
@variants focus, hover {
.rotate-0 {
transform: rotate(0deg);
}
.rotate-90 {
transform: rotate(90deg);
}
}
4.1.4 @responsive
可以生成一些响应式如渐变之类的样式
@responsive {
.bg-gradient-brand {
background-image: linear-gradient(blue, green);
}
}
4.1.5 @screen
媒体查询
@media (min-width: 640px) {
/* ... */
}
@screen sm {
/* ... */
}
4.1.6 theme()
使用theme()函数来使用点符号访问Tailwind的配置值
.bg-blue {
background-color: theme('colors.blue.500');
}
4.2 编写插件
在tailwind.config.js中引入plugin
// tailwind.config.js
const plugin = require('tailwindcss/plugin')
module.exports = {
plugins: [
plugin(function({ addUtilities, addComponents, e, prefix, config }) {
// Add your custom styles here
}),
]
}
4.2.1 addUtilities() 注册新的utility样式
addUtilities函数允许在@tailwind实用程序指令处注册要输出的新样式(以及内置实用程序)。插件实用程序是按照注册的顺序输出的，在内置实用程序之后，所以如果一个插件的目标是与内置实用程序相同的任何属性，那么插件实用程序将优先。
// tailwind.config.js
const plugin = require('tailwindcss/plugin')
module.exports = {
plugins: [
plugin(function({ addUtilities }) {
const newUtilities = {
'.skew-10deg': {
transform: 'skewY(-10deg)',
},
'.skew-15deg': {
transform: 'skewY(-15deg)',
},
}
addUtilities(newUtilities)
})
]
}
4.2.2 addComponents() 注册新的component样式
addComponents函数允许在@tailwind组件指令中注册输出的新样式。使用它来添加更多是在其他框架中经常看到的那种需要用实际开发过程中覆盖的预构建组件复杂类，如按钮、表单控件、警报等。
// tailwind.config.js
const plugin = require('tailwindcss/plugin')
module.exports = {
plugins: [
plugin(function({ addComponents }) {
const buttons = {
'.btn': {
padding: '.5rem 1rem',
borderRadius: '.25rem',
fontWeight: '600',
},
'.btn-blue': {
backgroundColor: '#3490dc',
color: '#fff',
'&:hover': {
backgroundColor: '#2779bd'
},
},
'.btn-red': {
backgroundColor: '#e3342f',
color: '#fff',
'&:hover': {
backgroundColor: '#cc1f1a'
},
},
}
addComponents(buttons)
})
]
}
4.2.3 addBase() 注册新的base样式
addBase函数允许在@tailwind基础指令中注册输出的新样式。使用它来添加基本字体样式、重置全局样式或者@font-face规则。
// tailwind.config.js
const plugin = require('tailwindcss/plugin')
module.exports = {
plugins: [
plugin(function({ addBase, config }) {
addBase({
'h1': { fontSize: config('theme.fontSize.2xl') },
'h2': { fontSize: config('theme.fontSize.xl') },
'h3': { fontSize: config('theme.fontSize.lg') },
})
})
]
}
4.2.4 addVariant() 注册custom variants
addVariant函数允许您注册自己的自定义变体，可以像内置的hover, focus, active等变体一样使用。要添加新变体，请调用addVariant函数，传入自定义变体的名称和一个回调，该回调根据需要修改受影响的CSS规则。要添加新变体时，调用addVariant函数，传入自定义变体的名称和一个回调，该回调根据需要修改受影响的CSS规则。
const plugin = require('tailwindcss/plugin')
module.exports = {
plugins: [
plugin(function({ addVariant, e }) {
addVariant('disabled', ({ modifySelectors, separator }) => {
modifySelectors(({ className }) => {
return `.${e(`disabled${separator}${className}`)}:disabled`
})
})
})
]
}
4.2.5 e() 用于转义要在类名中使用的字符串
如果所需插件生成的类包含用户提供的字符串，可以使用e函数来转义这些类名，以确保自动正确处理非标准字符。
例如，这个插件生成一组.rotate-{angle}工具，其中{angle}是用户提供的字符串。
// tailwind.config.js
const _ = require('lodash')
const plugin = require('tailwindcss/plugin')
module.exports = {
theme: {
rotate: {
'1/4': '90deg',
'1/2': '180deg',
'3/4': '270deg',
}
},
plugins: [
plugin(function({ addUtilities, config, e }) {
const rotateUtilities = _.map(config('theme.rotate'), (value, key) => {
return {
[`.${e(`rotate-${key}`)}`]: {
transform: `rotate(${value})`
}
}
})
addUtilities(rotateUtilities)
})
]
}
在使用时可直接用类名.rotate-1/4或rotate-1/2 等
4.2.6 prefix() 用于将用户配置的前缀手动应用到选择器的各个部分
如果只希望为某些类添加前缀，那么可以使用prefix函数来细粒度地控制何时配置前缀。
// tailwind.config.js
const plugin = require('tailwindcss/plugin')
module.exports = {
prefix: 'tw-', // 前缀
plugins: [
plugin(function({ addComponents, prefix }) {
addComponents({
[`.existing-class > ${prefix('.new-class')}`]: {
backgroundColor: '#fff',
}
})
})
]
}
这段代码会生成的样式为
.existing-class > .tw-new-class {
background-color: #fff;
}
4.2.7 theme()、variants()、config()
theme() - 用于查找用户主题配置中的值
variants() - 用于查找用户variants配置中的值
config() - 用于查找用户Tailwind配置中的值
config、theme和variant函数允您使用点符号从用户的Tailwind配置中请求一个值，如果该路径不存在，则提供一个默认值。
// tailwind.config.js
const _ = require('lodash')
const plugin = require('tailwindcss/plugin')
module.exports = {
plugins: [
plugin(function({ addComponents, theme }) {
const screens = theme('screens', {})
const mediaQueries = _.map(screens, width => {
return {
[`@media (min-width: ${width})`]: {
'.container': {
'max-width': width,
},
},
}
})
addComponents([
{ '.container': { width: '100%' } },
...mediaQueries,
])
})
]
}
这几个函数只是提供了一个快捷方式去访问用户的配置。例如config('theme.screens') 与 theme('screens')是等价的。
4.2.8 postcss 用于直接使用PostCSS做一些操作
如果需要做的事情不仅仅是修改选择器(比如更改实际的规则声明，或者将规则包装在另一个at-rule中)，那么需要使用容器实例。通过使用容器实例，可以遍历给定模块或@variant块中的所有规则，并使用标准的PostCSS API以喜欢的方式操作它们。
更多直接使用PostCSS的方法详见PostCss API
4.3 基础样式
1）标题、引号、段落等元素的所有默认边距为0;
2）所有标题元素都是完全无样式的，并且与普通文本具有相同的字体大小和字体粗细；
3）ol,ul的默认边距为0；
4）图像和其他被替换的元素(如svg、video、canvas和其他)默认为display: block；
5）所有元素的默认边框样式为：
*,
*::before,
*::after {
border-width: 0;
border-style: solid;
border-color: theme('borderColor.default', currentColor);
}
可通过@apply改变这些默认样式，更多默认样式详见基础样式
4.4 常用样式
4.4.1 布局
1）container
| Class | Breakpoint | Properties |
|---|---|---|
| .container | None | width: 100%; |
| .container | sm (640px) | max-width: 640px; |
| .container | md (768px) | max-width: 768px; |
| .container | lg (1024px) | max-width: 1024px; |
| .container | xl (1280px) | max-width: 1280px; |
container类将元素的最大宽度设置为与当前断点的最小宽度匹配。如果要使容器居中，使用.mx-auto
// 如现在是1440的屏幕，这个样式的效果就为1280的容器居中
<div class="container mx-auto">
<!-- ... -->
</div>
2）Box Sizing
| Class | Properties |
|---|---|
| .box-border | box-sizing: border-box; |
| .box-content | box-sizing: content-box; |
3） Display
| Class | Properties |
|---|---|
| .hidden | display: none; |
| .block | display: block; |
| .flow-root | display: flow-root; |
| .inline-block | display: inline-block; |
| .inline | display: inline; |
| .flex | display: flex; |
| .inline-flex | display: inline-flex; |
| .grid | display: grid; |
| .inline-grid | display: inline-grid; |
| .table | display: table; |
| .table-caption | display: table-caption; |
| .table-cell | display: table-cell; |
| .table-column | display: table-column; |
| .table-column-group | display: table-column-group; |
| .table-footer-group | display: table-footer-group; |
| .table-header-group | display: table-header-group; |
| .table-row-group | display: table-row-group; |
| .table-row | display: table-row; |
4）Floats
| Class | Properties |
|---|---|
| .float-right | float: right; |
| .float-left | float: left; |
| .float-none | float: none; |
| .clearfix | &::after {content: "";display:table;clear: both;} |
5）Clear
| Class | Properties |
|---|---|
| .clear-left | clear: left; |
| .clear-right | clear: right; |
| .clear-both | clear: both; |
| .clear-none | clear: none; |
6）Overflow
| Class | Properties |
|---|---|
| .overflow-auto | overflow: auto; |
| .overflow-hidden | overflow: hidden; |
| .overflow-visible | overflow: visible; |
| .overflow-scroll | overflow: scroll; |
| .overflow-x-auto | overflow-x: auto; |
| .overflow-y-auto | overflow-y: auto; |
| .overflow-x-hidden | overflow-x: hidden; |
| .overflow-y-hidden | overflow-y: hidden; |
| .overflow-x-visible | overflow-x: visible; |
| .overflow-y-visible | overflow-y: visible; |
| .overflow-x-scroll | overflow-x: scroll; |
| .overflow-y-scroll | overflow-y: scroll; |
| .scrolling-touch | -webkit-overflow-scrolling: touch; |
| .scrolling-auto | -webkit-overflow-scrolling: auto; |
7）Position
| Class | Properties |
|---|---|
| .static | position: static; |
| .fixed | position: fixed; |
| .absolute | position: absolute; |
| .relative | position: relative; |
| .sticky | position: sticky; |
8）Top / Right / Bottom / Left
| Class | Properties |
|---|---|
| .inset-0 | top: 0;right: 0;bottom: 0;left: 0; |
| .inset-y-0 | top: 0;bottom: 0; |
| .inset-x-0 | right: 0;left: 0; |
| .top-0 | top: 0; |
| .right-0 | right: 0; |
| .bottom-0 | bottom: 0; |
| .left-0 | left: 0; |
| .inset-auto | top: auto;right: auto;bottom: auto;left: auto; |
| .inset-y-auto | top: auto;bottom: auto; |
| .inset-x-auto | left: auto;right: auto; |
| .top-auto | top: auto; |
| .bottom-auto | bottom: auto; |
| .left-auto | left: auto; |
| .right-auto | right: auto; |
9）Visibility
| Class | Properties |
|---|---|
| .visible | visibility: visible; |
| .invisible | visibility: hidden; |
10）Z-Index
| Class | Properties |
|---|---|
| .z-0 | z-index: 0; |
| .z-10 | z-index: 10; |
| .z-20 | z-index: 20; |
| .z-30 | z-index: 30; |
| .z-40 | z-index: 40; |
| .z-50 | z-index: 50; |
| .z-auto | z-index: auto; |
默认情况下，Tailwind提供了6个数字z-index实用程序和一个自动实用程序。可以在配置中修改。
// tailwind.config.js
module.exports = {
theme: {
zIndex: {
'0': 0,
- '10': 10,
- '20': 20,
- '30': 30,
- '40': 40,
- '50': 50,
+ '25': 25,
+ '50': 50,
+ '75': 75,
+ '100': 100,
'auto': 'auto',
}
}
}
4.4.2 FLEXBOX
1）Flex Direction
| Class | Properties |
|---|---|
| .flex-row | flex-direction: row; |
| .flex-row-reverse | flex-direction: row-reverse; |
| .flex-col | flex-direction: column; |
| .flex-col-reverse | flex-direction: column-reverse; |
2）Flex Wrap
| Class | Properties |
|---|---|
| .flex-no-wrap | flex-wrap: nowrap; |
| .flex-wrap | flex-wrap: wrap; |
| .flex-wrap-reverse | flex-wrap: wrap-reverse; |
3）Align Items
| Class | Properties |
|---|---|
| .items-stretch | align-items: stretch; |
| .items-start | align-items: flex-start; |
| .items-center | align-items: center; |
| .items-end | align-items: flex-end; |
| .items-baseline | align-items: baseline; |
4）Align Content
| Class | Properties |
|---|---|
| .content-start | align-content: flex-start; |
| .content-center | align-content: center; |
| .content-end | align-content: flex-end; |
| .content-between | align-content: space-between; |
| .content-around | align-content: space-around; |
5）Align Self
| Class | Properties |
|---|---|
| .self-auto | align-self: auto; |
| .self-start | align-self: flex-start; |
| .self-center | align-self: center; |
| .self-end | align-self: flex-end; |
| .self-stretch | align-self: stretch; |
6）Justify Content
| Class | Properties |
|---|---|
| .justify-start | justify-content: flex-start; |
| .justify-center | justify-content: center; |
| .justify-end | justify-content: flex-end; |
| .justify-between | justify-content: space-between; |
| .justify-around | justify-content: space-around; |
7）Flex
| Class | Properties |
|---|---|
| .flex-initial | flex: 0 1 auto; |
| .flex-1 | flex: 1 1 0%; |
| .flex-auto | flex: 1 1 auto; |
| .flex-none | flex: none; |
4.4.3 SPACING
1）Padding
| Class | Properties |
|---|---|
| .p-0 | padding: 0; |
| .p-1 | padding: 0.25rem; |
| .p-2 | padding: 0.5rem; |
| .p-px | padding: 1px; |
| .py-0 | padding-top: 0;padding-bottom: 0; |
| .py-1 | padding-top: 0.25rem;padding-bottom: 0.25rem; |
| .py-2 | padding-top: 0.5rem;padding-bottom: 0.5rem; |
| .py-px | padding-top: 1px;padding-bottom: 1px; |
| .px-0 | padding-right: 0;padding-left: 0; |
| .px-1 | padding-right: 0.25rem;padding-left: 0.25rem; |
| .px-2 | padding-right: 0.5rem;padding-left: 0.5rem; |
| .px-px | padding-right: 1px;padding-left: 1px; |
| .pt-0 | padding-top: 0; |
| .pt-1 | padding-top: 0.25rem; |
| .pt-2 | padding-top: 0.5rem; |
| .pt-px | padding-top: 1px; |
| .pr-0 | padding-right: 0; |
| .pr-1 | padding-right: 0.25rem; |
| .pr-2 | padding-right: 0.5rem; |
| .pr-px | padding-right: 1px; |
| .pb-0 | padding-bottom: 0; |
| .pb-1 | padding-bottom: 0.25rem; |
| .pb-2 | padding-bottom: 0.5rem; |
| .pb-px | padding-bottom: 1px; |
| .pl-0 | padding-left: 0; |
| .pl-1 | padding-left: 0.25rem; |
| .pl-px | padding-left: 1px; |
2）Margin
| Class | Properties |
|---|---|
| .m-0 | margin: 0; |
| .m-1 | margin: 0.25rem; |
| .m-2 | margin: 0.5rem; |
| .m-auto | margin: auto; |
| .m-px | margin: 1px; |
| .-m-1 | margin: -0.25rem; |
| .-m-2 | margin: -0.5rem; |
| .-m-px | margin: -1px; |
| .my-0 | margin-top: 0;margin-bottom: 0; |
| .my-1 | margin-top: 0.25rem;margin-bottom: 0.25rem; |
| .my-2 | margin-top: 0.5rem;margin-bottom: 0.5rem; |
| .my-auto | margin-top: auto;margin-bottom: auto; |
| .my-px | margin-top: 1px;margin-bottom: 1px; |
| .-my-1 | margin-top: -0.25rem;margin-bottom: -0.25rem; |
| .-my-2 | margin-top: -0.5rem;margin-bottom: -0.5rem; |
| .-my-px | margin-top: -1px;margin-bottom: -1px; |
| .mx-0 | margin-right: 0;margin-left: 0; |
| .mx-1 | margin-right: 0.25rem;margin-left: 0.25rem; |
| .mx-2 | margin-right: 0.5rem;margin-left: 0.5rem; |
| .mx-auto | margin-right: auto;margin-left: auto; |
| .mx-px | margin-right: 1px;margin-left: 1px; |
| .-mx-1 | margin-right: -0.25rem;margin-left: -0.25rem; |
| .-mx-2 | margin-right: -0.5rem;margin-left: -0.5rem; |
| .-mx-px | margin-right: -1px;margin-left: -1px; |
| .mt-0 | margin-top: 0; |
| .mt-1 | margin-top: 0.25rem; |
| .mt-2 | margin-top: 0.5rem; |
| .mt-auto | margin-top: auto; |
| .mt-px | margin-top: 1px; |
| .-mt-1 | margin-top: -0.25rem; |
| .-mt-2 | margin-top: -0.5rem; |
| .-mt-px | margin-top: -1px; |
| .mr-0 | margin-right: 0; |
| .mr-1 | margin-right: 0.25rem; |
| .mr-2 | margin-right: 0.5rem; |
| .mr-auto | margin-right: auto; |
| .mr-px | margin-right: 1px; |
| .-mr-1 | margin-right: -0.25rem; |
| .-mr-2 | margin-right: -0.5rem; |
| .-mr-px | margin-right: -1px; |
| .mb-0 | margin-bottom: 0; |
| .mb-1 | margin-bottom: 0.25rem; |
| .mb-2 | margin-bottom: 0.5rem; |
| .mb-auto | margin-bottom: auto; |
| .mb-px | margin-bottom: 1px; |
| .-mb-1 | margin-bottom: -0.25rem; |
| .-mb-2 | margin-bottom: -0.5rem; |
| .-mb-px | margin-bottom: -1px; |
| .ml-0 | margin-left: 0; |
| .ml-1 | margin-left: 0.25rem; |
| .ml-2 | margin-left: 0.5rem; |
| .ml-auto | margin-left: auto; |
| .ml-px | margin-left: 1px; |
| .-ml-1 | margin-left: -0.25rem; |
| .-ml-2 | margin-left: -0.5rem; |
| .-ml-px | margin-left: -1px; |
4.4.4 SIZING
1）Width
| Class | Properties |
|---|---|
| .w-0 | width: 0; |
| .w-1 | width: 0.25rem; |
| .w-2 | width: 0.5rem; |
| .w-auto | width: auto; |
| .w-px | width: 1px; |
| .w-1/2 | width: 50%; |
| .w-1/3 | width: 33.333333%; |
| .w-2/3 | width: 66.666667%; |
| .w-1/4 | width: 25%; |
| .w-full | width: 100%; |
| .w-screen | width: 100vw; |
2）Min-Width
| Class | Properties |
|---|---|
| .min-w-0 | min-width: 0; |
| .min-w-full | min-width: 100%; |
3）Max-Width
| Class | Properties |
|---|---|
| .max-w-xs | max-width: 20rem; |
| .max-w-sm | max-width: 24rem; |
| .max-w-md | max-width: 28rem; |
| .max-w-lg | max-width: 32rem; |
| .max-w-xl | max-width: 36rem; |
| .max-w-2xl | max-width: 42rem; |
| .max-w-full | max-width: 100%; |
| .max-w-screen-sm | max-width: 640px; |
| .max-w-screen-md | max-width: 768px; |
| .max-w-screen-lg | max-width: 1024px; |
| .max-w-screen-xl | max-width: 1280px; |
| .max-w-none | max-width: none; |
4）Height同Width
5）Min-Height
| Class | Properties |
|---|---|
| .min-h-0 | min-height: 0; |
| .min-h-full | min-height: 100%; |
| .min-h-screen | min-height: 100vh; |
6）Max-Height
| Class | Properties |
|---|---|
| .max-h-full | max-height: 100%; |
| .max-h-screen | max-height: 100vh; |
4.4.5 排版
1）Font Size
| Class | Properties |
|---|---|
| .text-xs | font-size: .75rem; |
| .text-sm | font-size: .875rem; |
| .text-base | font-size: 1rem; |
| .text-lg | font-size: 1.125rem; |
| .text-xl | font-size: 1.25rem; |
| .text-2xl | font-size: 1.5rem; |
2）Font Weight
| Class | Properties |
|---|---|
| .font-hairline | font-weight: 100; |
| .font-thin | font-weight: 200; |
| .font-light | font-weight: 300; |
| .font-normal | font-weight: 400; |
| .font-medium | font-weight: 500; |
| .font-semibold | font-weight: 600; |
| .font-bold | font-weight: 700; |
| .font-extrabold | font-weight: 800; |
| .font-black | font-weight: 900; |
3）Text Alignment
| Class | Properties |
|---|---|
| .text-left | text-align: left; |
| .text-center | text-align: center; |
| .text-right | text-align: right; |
| .text-justify | text-align: justify; |
4）Text Color
| Class | Properties |
|---|---|
| .text-transparent | color: transparent; |
| .text-current | color: currentColor; |
| .text-black | color: #000; |
| .text-white | color: #fff; |
| .text-gray-100 | color: #f7fafc; |
5）Text Decoration
| Class | Properties |
|---|---|
| .underline | text-decoration: underline; |
| .line-through | text-decoration: line-through; |
| .no-underline | text-decoration: none; |
6）Vertical Alignment
| Class | Properties |
|---|---|
| .align-baseline | vertical-align: baseline; |
| .align-top | vertical-align: top; |
| .align-middle | vertical-align: middle; |
| .align-bottom | vertical-align: bottom; |
| .align-text-top | vertical-align: text-top; |
| .align-text-bottom | vertical-align: text-bottom; |
7）Word Break
| Class | Properties |
|---|---|
| .break-normal | word-break: normal;overflow-wrap: normal |
| .break-words | overflow-wrap: break-word; |
| .break-all | word-break: break-all; |
| .truncate | overflow: hidden;text-overflow: ellipsis;white-space: nowrap |
4.4.6 背景
1）Background Color
| Class | Properties |
|---|---|
| .bg-transparent | background-color: transparent; |
| .bg-current | background-color: currentColor; |
| .bg-black | background-color: #000; |
| .bg-white | background-color: #fff; |
| .bg-gray-100 | background-color: #f7fafc; |
| .bg-gray-900 | background-color: #1a202c; |
| .bg-red-100 | background-color: #fff5f5; |
| .bg-red-200 | background-color: #fed7d7; |
2）Background Opacity
| Class | Properties |
|---|---|
| .bg-opacity-0 | --bg-opacity: 0; |
| .bg-opacity-25 | --bg-opacity: 0.25; |
| .bg-opacity-50 | --bg-opacity: 0.5; |
| .bg-opacity-75 | --bg-opacity: 0.75; |
| .bg-opacity-100 | --bg-opacity: 1; |
3）Background Repeat
| Class | Properties |
|---|---|
| .bg-repeat | background-repeat: repeat; |
| .bg-no-repeat | background-repeat: no-repeat; |
| .bg-repeat-x | background-repeat: repeat-x; |
| .bg-repeat-y | background-repeat: repeat-y; |
| .bg-repeat-round | background-repeat: round; |
| .bg-repeat-space | background-repeat: space; |
4.4.7 BORDERS
1）Border Radius
| Class | Properties |
|---|---|
| .rounded-none | border-radius: 0; |
| .rounded-sm | border-radius: 0.125rem; |
| .rounded | border-radius: 0.25rem; |
| .rounded-md | border-radius: 0.375rem; |
| .rounded-lg | border-radius: 0.5rem; |
| .rounded-full | border-radius: 9999px; |
| .rounded-t-sm | border-top-left-radius: 0.125rem;border-top-right-radius: 0.125rem; |
| .rounded-r-sm | border-top-right-radius: 0.125rem;border-bottom-right-radius: 0.125rem; |
2）Border Width
| Class | Properties |
|---|---|
| .border | border-width: 1px; |
| .border-0 | border-width: 0; |
| .border-2 | border-width: 2px; |
| .border-t | border-top-width: 1px; |
| .border-r | border-right-width: 1px; |
| .border-b | border-bottom-width: 1px; |
| .border-l | border-left-width: 1px; |
| .border-t-0 | border-top-width: 0; |
3）Border Color
| Class | Properties | |
|---|---|---|
| .border-transparent | border-color: transparent; | |
| .border-current | border-color: currentColor; .border-black | border-color: #000; |
| .border-white | border-color: #fff; | |
| .border-gray-100 | border-color: #f7fafc; |
4）Border Style
| Class | Properties |
|---|---|
| .border-solid | border-style: solid; |
| .border-dashed | border-style: dashed; |
| .border-dotted | border-style: dotted; |
| .border-double | border-style: double; |
| .border-none | border-style: none; |
4.4.8 特效
1）Box Shadow
| Class | Properties |
|---|---|
| .shadow-xs | box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05); |
| .shadow-sm | box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05); |
| .shadow | box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06); |
| .shadow-md | box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); |
| .shadow-lg | box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); |
| .shadow-xl | box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); |
| .shadow-2xl | box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25); |
| .shadow-inner | box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06); |
| .shadow-outline | box-shadow: 0 0 0 3px rgba(66, 153, 225, 0.5); |
| .shadow-none | box-shadow: none; |
- Opacity Class | Properties -------------| --- .opacity-100 | opacity: 1; .opacity-75 | opacity: .75; .opacity-50 | opacity: .5; .opacity-25 | opacity: .25; .opacity-0 | opacity: 0;
4.4.9 TRANSITIONS
| Class | Properties |
|---|---|
| .transition-transform | transition-property: transform; |
| .duration-75 | transition-duration: 75ms; |
| .duration-100 | transition-duration: 100ms; |
| .ease-linear | transition-timing-function: linear; |
| .ease-in | transition-timing-function: cubic-bezier(0.4, 0, 1, 1); |
| .ease-out | transition-timing-function: cubic-bezier(0, 0, 0.2, 1); |
| .ease-in-out | transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); |
| .delay-75 | transition-delay: 75ms; |
| .delay-100 | transition-delay: 100ms; |
| .delay-150 | transition-delay: 150ms; |
4.4.10 TRANSFORMS
1）Scale
| Class | Properties |
|---|---|
| .scale-0 | --transform-scale-x: 0;--transform-scale-y: 0; |
| .scale-50 | --transform-scale-x: .5;--transform-scale-y: .5; |
| .scale-75 | --transform-scale-x: .75;--transform-scale-y: .75; |
| .scale-x-0 | --transform-scale-x: 0; |
| .scale-x-50 | --transform-scale-x: .5; |
| .scale-x-75 | --transform-scale-x: .75; |
| .scale-y-0 | --transform-scale-y: 0; |
| .scale-y-50 | --transform-scale-y: .5; |
| .scale-y-75 | --transform-scale-y: .75; |
2）Rotate
| Class | Properties |
|---|---|
| .rotate-0 | --transform-rotate: 0; |
| .rotate-45 | --transform-rotate: 45deg; |
| .rotate-90 | --transform-rotate: 90deg; |
| .rotate-180 | --transform-rotate: 180deg; |
| .-rotate-180 | --transform-rotate: -180deg; |
| .-rotate-90 | --transform-rotate: -90deg; |
| .-rotate-45 | --transform-rotate: -45deg; |
3）Translate
| Class | Properties |
|---|---|
| .translate-x-0 | --transform-translate-x: 0; |
| .translate-x-1 | --transform-translate-x: 0.25rem; |
| .translate-x-2 | --transform-translate-x: 0.5rem; |
| .translate-x-px | --transform-translate-x: 1px; |
| .-translate-x-1 | --transform-translate-x: -0.25rem; |
| .-translate-x-2 | --transform-translate-x: -0.5rem; |
| .-translate-x-px | --transform-translate-x: -1px; |
| .-translate-x-full | --transform-translate-x: -100%; |
| .-translate-x-1/2 | --transform-translate-x: -50%; |
| .translate-x-1/2 | --transform-translate-x: 50%; |
| .translate-x-full | --transform-translate-x: 100%; |
| .translate-y-0 | --transform-translate-y: 0; |
| .translate-y-1 | --transform-translate-y: 0.25rem; |
| .translate-y-px | --transform-translate-y: 1px; |
| .-translate-y-1 | --transform-translate-y: -0.25rem; |
| .-translate-y-2 | --transform-translate-y: -0.5rem; |
| .-translate-y-px | --transform-translate-y: -1px; |
| .-translate-y-full | --transform-translate-y: -100%; |
| .-translate-y-1/2 | --transform-translate-y: -50%; |
| .translate-y-1/2 | --transform-translate-y: 50%; |
| .translate-y-full | --transform-translate-y: 100%; |
4.4.11 INTERACTIVITY
1）Cursor
| Class | Properties |
|---|---|
| .cursor-auto | cursor: auto; |
| .cursor-default | cursor: default; |
| .cursor-pointer | cursor: pointer; |
| .cursor-wait | cursor: wait; |
| .cursor-text | cursor: text; |
| .cursor-move | cursor: move; |
| .cursor-not-allowed | cursor: not-allowed; |
2）User Select
| Class | Properties |
|---|---|
| .select-none | user-select: none; |
| .select-text | user-select: text; |
| .select-all | user-select: all; |
| .select-auto | user-select: auto; |
五.小结
本文只是简单介绍了一下Tailwind CSS及常用的样式，要了解更多请参见官方文档哦~
