Nav Item Nav Item Nav Item Nav Item Nav Item Nav Item Nav Item
| flex- | Flexbox 相关样式 | flex-row(表示横向排列) | | grid- | Grid 相关样式 | grid-cols-3(表示三列) | | rounded- | 圆角 | rounded-lg(表示大圆角) | | shadow- | 阴影 | shadow-md(表示中等阴影) | | opacity- | 不透明度 | opacity-50(表示 50% 不透明)| | overflow- | 溢出...
<!-- 侧边栏 -->
不要使用flex flex-row justify-between,可以直接使用flex justify-between。这是因为在 CSS 中,flex-row是flex-direction属性的默认值。通常,记住其他 CSS 属性的一些默认值(例如flex-wrap)可能对识别这类情况有帮助。 不要编写类似border border-dotted border-2 border-black border-opacity-50的长类列表,可以设置...
下面呢,我们就以我相对熟悉的技术(Vite+React)来演示如何在项目中使用Tailwind CSS。 1. 创建项目 我们是用Vite来创建一个React+TS项目。 代码语言:javascript 复制 yarn create vite tailwindReact--template react-ts cd tailwindReact 2. 安装 Tailwind 相关依赖 ...
tailwindcss 内置了大量工具类名，理论上可以做到100%使用内置方案覆盖。例如block, absolute, flex, top-0, overflow-hidden， whitespace-nowrap, border, border-black 只看名称就能唯一确定属性，符合开发直觉。对于一些 css 通用名称，tailwindcss提供了统一的规范。例如 left, right, top, bottom, ...
Tailwind CSS 是功能强大的utility-first的 CSS 类框架。 包含的工具类多 Tailwind CSS 包含几乎所有的常见工具类。包括: 布局: 盒模型,overflow,浮动,Position 定位,Flex 布局,Grid 布局等。 响应式: 定义了5个断点(sm, md, lg, xl, 2xl)。 尺寸:margin,padding,宽,高。
npx tailwindcss init tailwindcss-config.js 如果使用自定义文件名,则在 PostCSS 配置中将 Tailwind 做为插件引入时,也需要指定它: // postcss.config.js module.exports = { plugins: { tailwindcss: { config: './tailwindcss-config.js' }, }, } 创建PostCSS 配置文件 如果您想在生成 tailwind.config.js...
0x01 概述 (1)简介 Tailwind CSS 官网:https://www.tailwindcss.cn/ Tailwind CSS 是一个 CSS 框架,使用初级“工具”类创建布局 如 Bootstrap 等传统 CSS 框架,其使用的类通常与组件直接相关;然而,Tailwind 则采用了
下面呢,我们就以我相对熟悉的技术(Vite+React)来演示如何在项目中使用Tailwind CSS。 1. 创建项目 我们是用Vite来创建一个React+TS项目。 yarn create vite tailwindReact --template react-tscd tailwindReact 2. 安装 Tailwind 相关依赖 yarn add -D tailwindcss postcss autoprefixer ...