TailWind Css
Tailwind是一个能让你快速构建响应式布局，现代化页面的css框架，他能够改变目前前端页面编写css的方式，他是完全由你掌握，性能高效的css框架，通过直接使用框架内置的class来快速的调整页面的样式，打包时，框架通过对你的html，script,组件等class的扫码，生成相应的的静态css文件。
直接开始
我们先跳过安装，直接来看效果直接上手来体验一下，点击跳转在线体验。
清空左侧编辑栏，我们就可以直接写div了，写完的样式会实时展示在右侧的预览框内。
基础样式
敲击class名会自动提示所有相近类名，下拉列表可以选择你想用的类名：
css
<div class="flex justify-center bg-sky-300 text-6xl m-4 p-4 rounded-md shadow-lg text-white font-medium ">
hello tailwind
</div>
其中：
- 类名flex代表着display:flex
- justify-center代表着justify-content:center
- bg-sky-300代表着background-color: var(--color-sky-300)
- text-6xl代表着font-size: var(--text-6xl);line-height: var(--tw-leading, var(--text-6xl--line-height));
- m-4代表着 margin: calc(var(--spacing) * 4) 他的值并不是固定的4px，而是4rem
- p-4代表着padding: calc(var(--spacing) * 4)，m和p搭配l、r、t、b、x、y分别代表着left、right、top、bottom，水平方向，垂直方向，如mx-4代表margin-left和margin-right距离是4rem，py-4就代拜着padding-top和padding-bottom距离是4rem
- rounded-md代表着border-radius: var(--radius-md);
- shadow-lg代表着--tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 4px 6px -4px var(--tw-shadow-color, rgb(0 0 0 / 0.1)); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);shadow让我们的元素看起来更立体，经常用到，在tailwind中简单的shadow-* 立马就展示出效果
- text-white代表着color: var(--color-white);
- font-medium代表着--tw-font-weight: var(--font-weight-medium);font-weight: var(--font-weight-medium); 其他所有的类名，我们可以在tialwind官网页面ctrl+K键进行搜索。
动态伪类
包括:hover:focus:active:first:last:odd:even:required:disabled:has:not:before:after等等，对于平常的css来说，要写这些伪类就有些费事了，但是用windtail就会变得方便快捷的多了。
css
<div class="flex justify-between bg-gray-100 w-auto rounded-md m-6 p-6 ">
<div class=" bg-white shadow rounded-md p-2 h-full ">
<span>学习伪类的用法</span>
<span>hover,focus,active</span>
</div>
<div class="h-full p-2 mr-10 ">
<button class="p-2 text-white rounded-lg bg-violet-400 hover:bg-violet-600 focus:outline-2 focus:outline-offset-2 focus:outline-violet-500 active:bg-cyan-300">点击确认</button>
</div>
</div>来看效果 正常状态bg-violet-400,背景颜色：
hover状态，只需要增加hover:bg-violet-600：
focus状态，只需要增加focus:outline-2 focus:outline-offset-2 focus:outline-violet-500：
active状态,只需要增加active:bg-cyan-300：
这样看来的话确实比直接写css样式要简单了许多。
用before实习,只需要添加before:absolute before:-inset-1 before:block before:-skew-y-3 before:bg-pink-500这些类即可，他们对应的css是（这些伪类具体意义没有深究）：
css
.before\:absolute {
&::before {
content: var(--tw-content);
position: absolute;
}
}
.before\:-inset-1 {
&::before {
content: var(--tw-content);
inset: calc(var(--spacing) * -1);
}
}
.before\:block {
&::before {
content: var(--tw-content);
display: block;
}
}
.before\:-skew-y-3 {
&::before {
content: var(--tw-content);
--tw-skew-y: skewY(calc(3deg * -1));
transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,);
}
}
.before\:bg-pink-500 {
&::before {
content: var(--tw-content);
background-color: var(--color-pink-500);
}
}对应的tailwind类名：
css
<span class="relative inline-block before:absolute before:-inset-1 before:block before:-skew-y-3 before:bg-pink-500">
<span class="relative text-white ">独一无二</span>
</span>文件选择input框
对应的css代码：
css
<input
type="file"
class="bg-white rounded-full file:mr-4 file:rounded-full file:border-1 file:bg-violet-50 file:px-4 file:py-2 file:text-sm file:font-semibold file:text-violet-700 hover:file:bg-violet-100 "
/>选中文字效果，selection:
只需要增加类selection:bg-fuchsia-300 selection:text-white即可。 整体来说稍微对tailwind熟悉一点，就能感觉到确实很快捷，我是个后端开发者，以前开发过html、js、css这些，最近无聊才接触的vue3，刚开始接触tailwind的时候确实有点感觉像是在写inline样式，但是用一两天就立马发现不一样了。所有的伪类class可以查看官网文档哟！
响应式样式
tailwind是手机优先选择，也就是说设计页面样式时首先以小屏幕设备为准，加上他的变化点前缀后，就会在对应的屏幕宽度条件下生效对应的样式
| 变化点前缀 | 最小的设备宽度 | 对应的CSS |
|---|---|---|
sm |
40rem (640px) | @media (width >= 40rem) { ... } |
md |
48rem (768px) | @media (width >= 48rem) { ... } |
lg |
64rem (1024px) | @media (width >= 64rem) { ... } |
xl |
80rem (1280px) | @media (width >= 80rem) { ... } |
2xl |
96rem (1536px) | @media (width >= 96rem) { ... } |
例如元素加上 "text-left sm:text-center md:bg-white lg:bg-blue"类后，元素的文字就会在宽度小于40rem（640px）的设备上靠左展示,大于40rem就会居中展示，大于48rem后就会背景颜色改为白色且居中展示，大于64rem背景色变为蓝色居中展示。 而且你可以通过配置theme来设定变化点的宽度
css
@import "tailwindcss";
@theme {
--breakpoint-xs: 30rem;
--breakpoint-2xl: 100rem;
--breakpoint-3xl: 120rem;
}这样你就新增加了xs 和 3xl变化点，对应的设备宽度分别为30rem和120rem，修改了2xl的宽度，从默认的96rem修改为了100rem
Dark mode深色模式
你只需要在需要在深色模式时改变样式的元素上增加 dark: 类型即可，例如你的div类名设置的是"bg-white dark:bg-gray-800"这两个类名，他们就代表着元素默认背景色是白色(bg-white)，深色模式下元素背景色是深灰色(bg-gray-800),就是这么简单。 如果想实现动态修改主题模式，可以在tailwind的css配置中加入"@custom-variant dark (&:where(.dark, .dark *))" ，这样就代表着任何以 .dark开头的类名都会变成暗色模式，我们可以动态给body或者固定元素来添加或者删除dark类名来实现主题模式在亮色和暗色之间的自由切换了。
css
<div >
<div class="min-h-screen bg-white p-10 text-gray-800 dark:bg-gray-900 dark:text-gray-200">
<button id="toggle-dark" class="rounded bg-blue-500 px-4 py-2 text-white dark:bg-blue-700"
onclick="document.body.classList.toggle('dark');">切换 Dark Mode</button>
<h1 class="mt-6 text-3xl font-bold">Tailwind Dark Mode 示例</h1>
<p class="mt-2">这是一个支持亮色/暗色模式的 Tailwind 页面。</p>
<div class="mt-6 w-sm rounded bg-gray-100 p-4 dark:bg-gray-800">这是一个会跟随 mode 变化背景色的容器。</div>
</div>
</div>
个性化
tailwind中的所有类都支持你的个性化配置，他们不光简单，而且还像api接口一样，支持自定义。 只需要在你的主css文件中，添加@theme来自定义你的类即可,例如我们在theme中添加 "--color-zhuti: #973F29;"这样我们就可以在div元素的类名里使用"bg-zhuti"这个颜色了，试想一下我们是不是可以把整个项目的基础颜色，字体大小都定义出来，在开发的时候用这些自定义的颜色、字体，我们最终整个项目的风格都是可变的了。
vue项目中引入tailwind
首先创建你的项目： npm create vite@latest your-project 然后安装插件： npm install tailwindcss @tailwindcss/postcss postcss 配置vite.config
vite.config.ts
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import tailwindcss from '@tailwindcss/vite'
// https://vite.dev/config/
export default defineConfig({
plugins: [tailwindcss(),vue()],
})配置tailwind.config.js，
tailwind.config.js
/** @type {import('tailwindcss').Config} */
export default {
content: [
"./index.html",
"./src/**/*.{vue,js,ts,jsx,tsx}",
],
theme: {
extend: {},
},
plugins: [],
}最后在你的css文件中引入
src/style.css
@import "tailwindcss";这样就可以在vue中使用tailwind了，vscode中一定要安装tailwind的插件,他可以检查你的theme中的语法，给你提示对应的类名，方便快捷。
结束语
tailwind的功能远不止于此，这也是我接触tailwind两周，对其基础部分的了解。想更进一步的可以去看看JavaScript Mastery的视频。 第一次写文章，大部分还是参考官网，可把我这后端开发难受坏了。。。