?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;
