随笔分类 - 前端 / tailwind
尺寸
摘要：单位 px（像素）： px 是一个绝对单位，它通常用于屏幕显示中的一个像素点。 在标准显示器上，1px 通常等同于一个物理像素点，但在高分辨率屏幕（如Retina显示屏）上，一个px可能对应多个物理像素点。 px单位不会随着其他元素的尺寸变化而变化。 em： em 是一个相对单位，它是相对于当前元素
阅读全文
背景
摘要：Background Attachment 固定背景： bg-fixed：使用这个类可以设置背景图像固定不动，即背景图像不会随着页面的滚动而移动。这在创建视差滚动效果时很有用。 滚动背景： bg-local：使背景图像与容器随着视口一起滚动 局部固定背景： bg-scroll：背景不懂，文字随着视口
阅读全文
盒子模型
摘要：Padding 所有方向的内边距： p-{size}：这个类设置所有四个方向的内边距。例如，p-4 会在所有方向上应用 1rem 的内边距。 垂直方向的内边距： py-{size}：这个类仅设置元素的上边距和下边距。例如，py-2 会在垂直方向上应用 0.5rem 的内边距。 水平方向的内边距： p
阅读全文
字体
摘要：字体 Font Family - 设置文本的字体族。例如 font-sans 会应用无衬线字体。 Font Size - 控制文本的字体大小。如 text-lg 会设置较大的字体大小。 Font Smoothing - 应用字体抗锯齿技术，如 antialiased 用于抗锯齿效果。 Font St
阅读全文
布局
摘要：container 使用响应式前缀来应用不同的样式类于不同的屏幕尺寸 不同的显示屏上显示不一样的布局 columns columns: 4; 的样式，这将创建一个4列的布局。同理，columns-5 会创建5列 position 结合其他尺寸类（如 top-0, right-0, bottom-0,
阅读全文
tailwailcss入门，都学什么
摘要：核心概念： Utility-First Fundamentals: 这是指Tailwind CSS的设计理念，其中大量使用工具类，即小的、单一用途的CSS类，用于构建复杂的设计。这种方法的好处是它可以快速地迭代和维护样式。 Hover, Focus, and Other States: Tailwi
阅读全文
Tailwind--安装
摘要：Tailwind CLI：这是指通过Tailwind的命令行界面安装。这种方式通常是全局安装，可以在终端或命令行中直接使用Tailwind命令。 Using PostCSS：PostCSS是一个用于转换CSS的工具，Tailwind CSS可以作为PostCSS插件来使用。这种方法通常需要在项目的构
阅读全文
