1、安装taillandcss
前几天接手了一个项目，看到别人用tailwindcss节省了很多css代码的编写，所以自己也想在公司项目中接入tailwindcss。
官网教程如下：
Installing Tailwind CSS with Vite - Tailwind CSS
然而，我在vite中按要求配置好了所有项之后，还是一直没有效果。尝试降低tailwindcss也没有用，搞了半天终于发现问题所在。因为我项目的主样式文件是一个scss文件，这是不行的,
必须要在css文件中导入tailwindcss才行
npm install tailwindcss @tailwindcss/vitevite.config.ts import { defineConfig } from 'vite' import tailwindcss from '@tailwindcss/vite' export default defineConfig({plugins: [tailwindcss(),], })
tailwind.css @import 'tailwindcss';import '@/assets/style/tailwind.css'最后就起作用了
2、语法规则
2.1 布局
flex：将元素设置为 flex 布局。
flex - xx：设置 flex 子项的排列方向，如flex - row（水平排列）、flex - col（垂直排列) 、flex-row-reverse、flex-col-reverse、justify-between、justify-around、justify-evenly、
justify-xx: 设置flex子项的水平对齐方式 justify-start、justify-center、justify-end
flex-xx: 换行，flex-nowrap、flex-wrap、flex-wrap-reverse
flex-x: 占多少，flex-2等价于flex: 2
items- xx: 设置flex子项的垂直对齐方式 items-start、items-end、items-center
2.2 边距
pl-[10]：注意：这个是0.25rem * 10, 会报错
改造了一下，标准设计稿情况下html的font-size: 100px;
:root {
--spacing: 1px; /* 默认0.25rem */
--radius-lg: 1px; /* 默认0.5rem */
}
就可以正常使用了
p-[10px]：等价于padding: 10px;
p-10: 等价于padding: 10px
m-10: 等价于margin: 10px
2.3 背景
内置颜色
bg-red-900：100 到 900 的不同色阶，数字越小颜色越浅
bg-[#e46e1b]：指定颜色
2.4 边框
border-1：border-size: 1px;
border-[#e46e1b]: border-color: #e46e1b;
border-dashed: border-style: dashed; 虚线，实线为border-solid属性
2.5 圆角
rounded：border-radius: 0.25rem;
rounded-none：border-radius: none;
rounded-[10px]: border-radius: 10px;
rounded-tl-[10px]：border-top-left-radius: 10px;
2.6 文本
text - [100px]: font-size: 100px; // 注意：这里只能这样，text-100不起作用
text-[#e46e1b]：font-color: #e46e1b;
font-bold: font-weight: bold; // font-normal
font-[700]: font-weight: 700
italic: font-style: italic;
line-clamp-[2]: overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit- line-clamp: <number>;显示几行
text-wrap：text-wrap
text-nowrap：text-nowrap
2.7 宽高
h-[20px]: height: 20px; // 或者h-20
w-20: width: 20px; // w-['20px']
min-h-[200px]: min-height: 200px;
max-h-[200px]: max-height: 200px;
min-w-[200px]: min-width: 200px;
max-w-[200px]: max-width: 200px;
