tailwindcss（类似内联样式）
前言
使用后的感受是它和内联样式的使用基本相似，除了一些名词的拼写（内联样式：background: skyblue; tailwindcss：bg-sky-200; ），最主要的是它比内联样式更好的特点：可以写鼠标悬停，光标聚焦等样式，可以写响应式布局，直接写在class中就行...虽然对比内联样式有很多好的地方，但是在开发中不推荐使用：在一个项目中，有多个人共同开发，你使用tailwindcss写的样式，别人在没接触过tailwindcss看你的代码时会非常麻烦，特别是由其他人修改、调整你绘制的页面样式时非常的吃力，而且一些相同的样式大量重复的编写也不好，对于后期的维护也不方便，因此在没有统一的沟通使用某种样式时，最好将css抽取出来，方便调整，修改，维护
安装引入
安装 Tailwind CSS
tailwindcss通过 npm安装，并创建您的tailwind.config.js 文件。
npm install -D tailwindcss
npx tailwindcss init配置您的模板路径
在文件中添加所有模板文件的路径tailwind.config.js。
module.exports = {
content: ["./src/**/*.{html,js}"],
theme: {
extend: {},
},
plugins: [],
}将 Tailwind 指令添加到您的 CSS
@tailwind将Tailwind 的每个层的指令添加到您的主 CSS 文件中。
@tailwind base;
@tailwind components;
@tailwind utilities;启动 Tailwind CLI 构建过程
运行 CLI 工具来扫描您的模板文件中的类并构建您的 CSS。
npx tailwindcss -i ./src/input.css -o ./dist/output.css --watch开始使用 Tailwind
将已编译的 CSS 文件添加到<head>并开始使用 Tailwind 的实用程序类来设置您的内容样式。
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="/dist/output.css" rel="stylesheet">
</head>
<body>
<h1 class="text-3xl font-bold underline">
Hello world!
</h1>
</body>
</html>常用配置
响应式：
sm640像素 @media (min-width: 640px) { ... }md768像素 @media (min-width: 768px) { ... }lg1024像素 @media (min-width: 1024px) { ... }xl1280像素 @media (min-width: 1280px) { ... }2xl1536像素 @media (min-width: 1536px) { ... }
<img class="w-16 md:w-32 lg:w-48" src="...">- Display：
| block | display: block; |
|---|---|
| inline-block | display: inline-block; |
| inline | display: inline; |
| flex | display: flex; |
| hidden | display: none; |
<div class="flex items-center">- Floats：浮动
| float-right | float: right; |
|---|---|
| float-left | float: left; |
| float-none | float: none; |
- Clear：清除
| clear-left | clear: left; |
|---|---|
| clear-right | clear: right; |
| clear-both | clear: both; |
| clear-none | clear: none; |
- Flex Direction：设置主轴的方向
| flex-row | flex-direction: row; |
|---|---|
| flex-row-reverse | flex-direction: row-reverse; |
| flex-col | flex-direction: column; |
| flex-col-reverse | flex-direction: column-reverse; |
- Flex Wrap：设置子元素是否换行
| flex-wrap | flex-wrap: wrap; |
|---|---|
| flex-wrap-reverse | flex-wrap: wrap-reverse; |
| flex-nowrap | flex-wrap: nowrap; |
- Justify Content：设置主轴上的子元素排列方式
| justify-start | justify-content: flex-start; |
|---|---|
| justify-end | justify-content: flex-end; |
| justify-center | justify-content: center; |
| justify-between | justify-content: space-between; |
| justify-around | justify-content: space-around; |
| justify-evenly | justify-content: space-evenly; |
- Justify Items：子元素以默认方式沿适当轴线对齐到每个盒子
| justify-items-start | justify-items: start; |
|---|---|
| justify-items-end | justify-items: end; |
| justify-items-center | justify-items: center; |
| justify-items-stretch | justify-items: stretch; |
- Align Content：设置侧轴上的子元素的排列方式(多行)
| content-center | align-content: center; |
|---|---|
| content-start | align-content: flex-start; |
| content-end | align-content: flex-end; |
| content-between | align-content: space-between; |
| content-around | align-content: space-around; |
| content-evenly | align-content: space-evenly; |
- Align Items：设置侧轴上的子元素的排列方式(单行)
| items-start | align-items: flex-start; |
|---|---|
| items-end | align-items: flex-end; |
| items-center | align-items: center; |
| items-baseline | align-items: baseline; |
| items-stretch | align-items: stretch; |
- Width：宽
| w-0 | width: 0px; |
|---|---|
| w-px | width: 1px; |
| w-0.5 | width: 0.125rem; / 2px / |
| w-1 | width: 0.25rem; / 4px / |
| w-1.5 | width: 0.375rem; / 6px / |
| w-2 | width: 0.5rem; / 8px / |
| w-2.5 | width: 0.625rem; / 10px / |
| w-3 | width: 0.75rem; / 12px / |
| w-auto | width: auto; |
| 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% |
- Min-Width：最小宽度
| min-w-0 | min-width: 0px; |
|---|---|
| min-w-full | min-width: 100%; |
| min-w-min | min-width: min-content; |
| min-w-max | min-width: max-content; |
| min-w-fit | min-width: fit-content; |
- Max-Width：最大宽度
| max-w-0 | max-width: 0rem; / 0px / |
|---|---|
| max-w-none | max-width: none; |
| max-w-xs | max-width: 20rem; / 320px / |
| max-w-sm | max-width: 24rem; / 384px / |
| max-w-md | max-width: 28rem; / 448px / |
| max-w-lg | max-width: 32rem; / 512px / |
| max-w-xl | max-width: 36rem; / 576px / |
| max-w-2xl | max-width: 42rem; / 672px / |
- Height：高
和宽配置相同
- Min-Height：最小高度
....
- Max-Height：最大高度
....
- Padding：内边距
| p-0 | padding: 0px; |
|---|---|
| px-0 | padding-left: 0px; padding-right: 0px; |
| py-0 | padding-top: 0px; padding-bottom: 0px; |
| pt-0 | padding-top: 0px; |
| pb-0 | padding-bottom: 0px; |
| pl-0 | padding-left: 0px; |
| pr-0 | padding-right: 0px; |
| p-[1px] | padding: 1px |
- Margin：外边距
| m-0 | margin: 0px; |
|---|---|
| mx-0 | margin-left: 0px; margin-right: 0px; |
| my-0 | margin-top: 0px; margin-bottom: 0px; |
| mt-0 | margin-top: 0px; |
| mr-0 | margin-right: 0px; |
| mb-0 | margin-bottom: 0px; |
| ml-0 | margin-left: 0px; |
| m-[1px] | margin: 1px; |
- Space Between：控制子元素之间空间距离
| space-x-0 > + | margin-left: 0px; | |
|---|---|---|
| space-y-0 > + | margin-top: 0px; | |
| space-x-0.5 > + | margin-left: 0.125rem; / 2px / | |
| space-{x\ | y}-[2px] | margin-left: 0.125rem; / 2px / |
- Font Size：字体大小
| text-xs | font-size: 0.75rem; / 12px / line-height: 1rem; / 16px / |
|---|---|
| text-sm | font-size: 0.875rem; / 14px / line-height: 1.25rem; / 20px / |
| text-base | font-size: 1rem; / 16px / line-height: 1.5rem; / 24px / |
| text-lg | font-size: 1.125rem; / 18px / line-height: 1.75rem; / 28px / |
| text-xl | font-size: 1.25rem; / 20px / line-height: 1.75rem; / 28px / |
- Font Style：字体样式
| italic | font-style: italic; |
|---|---|
| not-italic | font-style: normal; |
- Font Weight：字体粗细
| font-thin | font-weight: 100; |
|---|---|
| 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; |
- Text Color：文本颜色
| text-[#000000] | color: #000000 |
|---|---|
| text-inherit | color: inherit; |
| text-current | color: currentColor; |
- Background Color：背景颜色
| bg-[#000000] | background-color: #000000; | |
|---|---|---|
| bg-inherit | background-color: inherit; | |
| bg-current | background-color: currentColor; |
- 修饰词
- 伪类,
:hover,:focus,:first-child和:required - 伪元素,
::before,::after,::placeholder, 和::selection - 媒体查询，例如响应式断点、暗模式和
prefers-reduced-motion - 属性选择器，例如
[dir="rtl"]和[open]
<button class="bg-sky-600 hover:bg-sky-700 ...">
Save changes
</button>
<button class="bg-violet-500 hover:bg-violet-600 active:bg-violet-700 focus:outline-none focus:ring focus:ring-violet-300 ...">
Save changes
</button>
1 条评论
哈哈哈，写的太好了https://www.lawjida.com/