Tailwind CSS 的工作原理是扫描所有 HTML 文件、JavaScript 组件以及任何模板中的 CSS 类(class)名,然后生成相应的样式代码并写入到一个静态 CSS 文件中。他快速、灵活、可靠,没有运行时负担。再也不用为了取一个 classname 类名而烦恼了。
一、安装
这里以 React + Vite 为例
- 安装依赖,生成
postcss.config.js
和tailwind.config.js
配置文件
1 |
|
- 在
postcss.config.js
中引入tailwindcss
和autoprefixer
1 |
|
- 配置
tailwind.config.js
文件
1 |
|
- 新建
tailwind.css
入口文件
1 |
|
- 在
main.jsx
中引入tailwind.css
文件
1 |
|
二、使用
1、width、height、line-height
常用值:
w-[200px]
:width: 200px;h-[100vh]
:height: 100vh;min-h-[100vh]
:min-height: 100vh;max-h-[100vh]
:max-height: 100vh;w-full
:width: 100%;h-[100%]
:height: 100%;min-h-full
:min-height: 100%;min-h-[calc(100vh-60px)]
: min-height: calc(100vh - 60px);leading-none
:line-height: 1;leading-tight
:line-height: 1.25;leading-3
:line-height: 0.75rem; / 12px /leading-4
:line-height: 1rem; / 16px /leading-[20px]
:line-height: 20px;
1 |
|
2、background
1 |
|
3、font、text-align
1 |
|
4、border、border-radius
常用值:
rounded-none
:border-radius: 0;
rounded
:0.25rem; / 4px /rounded-md
:小圆角rounded-lg
:大圆角rounded-full
:圆形
1 |
|
参考:https://www.tailwindcss.cn/docs/border-radius
5、margin、padding
常用值:
m-0
:margin: 0;mx-0
: margin-left: 0; margin-right: 0;my-0
: margin-top: 0; margin-bottom: 0;mt-[10px]
: margin-top: 1px;m-[15px]
: margin: 15px;
1 |
|
参考:https://www.tailwindcss.cn/docs/margin
6、flex
常用值:
flex
:display: flex;flex-row
:flex-direction: row;flex-col
:flex-direction: column;flex justify-between
: justify-content: space-between;flex justify-center
: justify-content: center;flex items-center
: align-items: center;
1 |
|
参考:https://www.tailwindcss.cn/docs/flex
7、overflow
常用值:
overflow-hidden
:overflow: hidden;overflow-auto
:overflow: auto;overflow-x-auto
:overflow-x: auto;overflow-y-scroll
:overflow-y: scroll;
1 |
|
参考:https://www.tailwindcss.cn/docs/overflow
8、hover、focus、active、first、last
常用值:
hover:bg-[#f00]
:鼠标悬浮时的背景色first:bg-[#f00]
:第一个子元素的背景色
1 |
|
参考:https://www.tailwindcss.cn/docs/hover-focus-and-other-states
9、important
1 |
|
参考:https://www.tailwindcss.cn/docs/configuration#important
10、display
常用值:
hidden
:display: none;block
:display: block;inline-block
:display: inline-block;flex
:display: flex;
1 |
|
11、white-space、text-overflow
常用值:
whitespace-normal
:white-space: normal;whitespace-nowrap
:white-space: nowrap;whitespace-pre
:white-space: pre;whitespace-pre-wrap
:white-space: pre-wrap;whitespace-break-spaces
:white-space: break-spaces;text-ellipsis
:text-overflow: ellipsis;text-clip
:text-overflow: clip;truncate
:text-overflow: ellipsis; overflow: hidden; white-space: nowrap;(文本溢出隐藏)
1 |
|
12、Line Clamp 和 Ellipsis
多行文本超出(溢出)隐藏:
line-clamp-none
:
1 |
|
line-clamp-2
:
1 |
|
文本超出(溢出)省略:
text-ellipsis
:text-overflow: ellipsis;
text-clip
:text-overflow: clip;
truncate
:overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
13、Text Wrap (文本换行)
text-wrap
:text-wrap: wrap;
text-nowrap
:text-wrap: nowrap;
text-balance
:text-wrap: balance;
text-pretty
:text-wrap: pretty;
14、Whitespace 和 Word Break
white-space
whitespace-normal
:white-space: normal;
whitespace-nowrap
:white-space: nowrap;
whitespace-pre
:white-space: pre;
whitespace-pre-line
:white-space: pre-line;
whitespace-pre-wrap
:white-space: pre-wrap;
whitespace-break-spaces
:white-space: break-spaces;
word-break
break-normal
:overflow-wrap: normal; word-break: normal;
break-words
:overflow-wrap: break-word;
break-all
:word-break: break-all;
break-keep
:word-break: keep-all;
相关文章
欢迎访问:天问博客
本文作者: Tiven
发布时间: 2023-09-08
最后更新: 2024-07-30
本文标题: Tailwind CSS 原子化开发初体验
本文链接: https://www.tiven.cn/p/f6d841c8/
版权声明: 本作品采用 CC BY-NC-SA 4.0 许可协议进行许可。转载请注明出处!
发布时间: 2023-09-08
最后更新: 2024-07-30
本文标题: Tailwind CSS 原子化开发初体验
本文链接: https://www.tiven.cn/p/f6d841c8/
版权声明: 本作品采用 CC BY-NC-SA 4.0 许可协议进行许可。转载请注明出处!
v1.4.16