当前位置：首页 > news >正文

vite项目tailwindcss4的使用

news 来源：原创 2025/4/29 9:22:28

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;

布局

flex：将元素设置为 flex 布局。
flex - [direction]：设置 flex 子项的排列方向，如flex - row（水平排列）、flex - col（垂直排列）。
justify - [content]：设置 flex 子项的水平对齐方式，如justify - center（水平居中）。
items - [align]：设置 flex 子项的垂直对齐方式，如items - center（垂直居中）。
grid：将元素设置为 grid 布局。
grid - cols - [number]：设置网格列数，如grid - cols - 3（三列网格）。
文本
text - [size]：设置文本大小，如text - xl（1.25rem）。
text - [color]：设置文本颜色，如text - blue - 500。
font - [weight]：设置字体粗细，如font - bold。
italic：设置字体为斜体。
背景与边框
bg - [color]：设置背景颜色，如bg - gray - 100。
border - [width]：设置边框宽度，如border - 2。
border - [color]：设置边框颜色，如border - red - 400。
rounded - [size]：设置边框圆角，如rounded - lg。
响应式
sm：小屏幕（宽度≥640px）。
md：中等屏幕（宽度≥768px）。
lg：大屏幕（宽度≥1024px）。
xl：特大屏幕（宽度≥1280px）。
————————————————