TaiwindCSS基本使用

前端前端 css

字数统计: 552阅读时长: 2 min

 2024/12/14  2

Taiwindcss

用于react 的application ui组件库

Installation

不使用React

创建tailwind.config.js file和download

1 2	npm install -D tailwindcss npx tailwindcss init

在配置文件中添加模板文件路径

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./src/**/*.{html,js}"],
  theme: {
    extend: {},
  },
  plugins: [],
}

在主css文件添加@taiwind 指令

1
2
3

@tailwind base;
@tailwind components;
@tailwind utilities;

完成，可以在html中使用taiwind添加class类名了

如果使用Vite驱动框架：

1	npm install tailwindcss@next @tailwindcss/vite@next

在vite.config.ts：

import { defineConfig } from 'vite';
import tailwindcss from '@tailwindcss/vite';

export default defineConfig({
  plugins: [
    tailwindcss()
  ],
})

导入主css文件：

1	@import "tailwindcss";

使用React

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./src/**/*.{js,jsx,ts,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

在css中：

1
2
3

@tailwind base;
@tailwind components;
@tailwind utilities;

bg color

不同灰度级的背景色调色盘

css类:bg-black/white/slate(偏蓝灰)-(100-950),gray, zinc(纯灰),neutral, stone,red,orange,amber,lime....

设置不透明度：e.g. bg-sky-500/100,75,50

其他状态：hover:b-cyan-600

w

w-4 代表1rem

w-1 0.25rem

w-px 使用像素

w-1/2 分数设置百分比

w-full 全宽

w-screen 视口宽度

min-w- 最小宽度

媒体查询md:min-w-0 在中等屏幕尺寸下应用

h

与w同理

h-dvh 动态视口高度

h-lvh 最大视口高度

h-svh 最小

size

与w，h同理，同时设置wh

text

xs，sm，base，lg，xl，2xl，4xl

font-bold

rounded

=border 同text

flex

flex设置为弹性布局

flex-row flex-col设置主轴

flex-wrap 换行

justify-center 沿主轴居中

justify-between/around/evenly

items-center...

gap 设置子元素艰巨

m

设置margin

mx-4 my-4 水平和垂直方向

mt mr mb ml 上下左右方向

-m-4 负值

p

设置padding

同m

transform

Transform 设置变换效果

translate 平移 -x-4 -y-2

rotate-45 顺时针

scale-110 缩放1.1倍

skew-x-12 倾斜度数

transition

transition 过渡

transition-colors 渐变颜色

transition-transform 变换相关属性进行过渡

duration-300 持续时间300ms

ease-in/out/in-out 缓动函数

delay-200 延迟ms

animation

animation-ping 逐渐淡出

-bounce 弹跳动画

-spin 旋转动画

-pulse 呼吸动画

响应式

sm: md: lg:

状态类

hover: active: focus:

原文作者：Yuxiang Bao

原文链接：https://ethanbao27.github.io/2024/12/14/Taiwind%20css%E5%9F%BA%E6%9C%AC%E4%BD%BF%E7%94%A8/

发表日期：December 14th 2024, 11:55:24 pm

更新日期：December 15th 2024, 1:39:54 am

Next Post

软件工程期末复习
Previous Post

计算机网络考试复习（详细版）

CATALOG

1. Taiwindcss