vite项目tailwindcss4的使用

 1、安装taillandcss

前几天接手了一个项目，看到别人用tailwindcss节省了很多css代码的编写，所以自己也想在公司项目中接入tailwindcss。  

官网教程如下：  

Installing Tailwind CSS with Vite - Tailwind CSS  

然而，我在vite中按要求配置好了所有项之后，还是一直没有效果。尝试降低tailwindcss也没有用，搞了半天终于发现问题所在。因为我项目的主样式文件是一个scss文件，这是不行的,

必须要在css文件中导入tailwindcss才行  

npm install tailwindcss @tailwindcss/vite

vite.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;