tailwailcss入门，都学什么

核心概念：

  1. Utility-First Fundamentals: 这是指Tailwind CSS的设计理念，其中大量使用工具类，即小的、单一用途的CSS类，用于构建复杂的设计。这种方法的好处是它可以快速地迭代和维护样式。

  2. Hover, Focus, and Other States: Tailwind CSS允许您直接在HTML元素上通过类名控制不同状态的样式，例如hover（悬停）、focus（聚焦）、active（活动）、disabled（禁用）等。

  3. Responsive Design: Tailwind CSS使用响应式设计的工具类，可以让您创建在不同屏幕尺寸和设备上都能良好显示的布局和界面。通常通过前缀来标示，比如md:、lg:等。

  4. Dark Mode: Tailwind CSS支持暗模式，这是一种在用户设备上设置为暗模式时，能够自动切换到特定样式的功能。

  5. Reusing Styles: 在Tailwind CSS中，重用样式通常是通过组件类和工具类来实现的，这有助于保持一致性并减少CSS代码的冗余。

  6. Adding Custom Styles: 尽管Tailwind提供了大量的工具类，但有时您可能需要添加自定义样式。Tailwind让您可以轻松地通过配置文件或使用@apply指令在CSS中添加这些样式。

  7. Functions & Directives: Tailwind CSS提供了一系列的CSS函数和指令，使得您可以更灵活地定义样式，比如条件判断、循环等高级功能

定制：

  1. Configuration: Tailwind CSS允许您通过tailwind.config.js文件进行自定义配置。您可以在这里定义自己的主题，包括颜色、字体、断点等。

  2. Content: 在Tailwind的配置中，您可以指定应该扫描哪些文件来寻找类名。这样，Tailwind只会生成您实际在项目中使用的CSS。

  3. Theme: 主题是Tailwind配置的一部分，定义了项目的设计系统，包括颜色、字体、边距等。

  4. Screens: 在Tailwind中，屏幕（或断点）用于定义响应式设计的尺寸，用于在不同屏幕尺寸下应用不同的样式。

  5. Colors: Tailwind提供了一个默认的色板，您可以在配置中自定义这些颜色，以适应您的设计需求。

  6. Spacing: Tailwind中的间距用于定义元素的内边距、外边距和间隙。您可以在配置文件中自定义这些值。

  7. Plugins: Tailwind支持插件，这意味着您可以添加第三方插件或创建自己的插件来扩展框架的功能。

  8. Presets: 预设允许您将一组Tailwind配置打包成可重用的配置片段，可以在多个项目之间共享。

  9. Base Styles: Tailwind的基础样式是全局样式，用于设置合理的默认样式，如normalize.css或reset.css所做的那样。

  10. Preflight: Tailwind的Preflight是一组基于normalize.css的基础样式，它通过设置一些初始样式来提供一致的跨浏览器体验

布局：

  1. spect Ratio: 定义宽高比，通常用于响应式设计中保持元素的宽高比。
  2. Container: 通常指一个包含元素，用于限定内部元素的最大宽度和中心对齐。
  3. Columns: 在CSS中，用于定义多列布局的属性。
  4. Break After/Break Before/Break Inside: 控制分页、区域或列中的断点。
  5. Box Decoration Break: 定义元素的装饰（如背景、边框等）如何跨越元素断点。
  6. Box Sizing: 定义如何计算元素的总宽度和高度。
  7. Display: 一个CSS属性，用于定义元素的显示类型，如block, inline, flex, grid等。
  8. Floats: 一个CSS属性，用于定义元素如何浮动在容器中。
  9. Clear: 用于控制元素是否应该清除之前的浮动。
  10. Isolation: 用于创建一个独立的层叠上下文。
  11. Object Fit: 控制替换元素（如img或video）内容如何适应其容器。
  12. Object Position: 控制替换元素（如img或video）内容的位置。
  13. Overflow: 定义当内容溢出其容器时如何处理。
  14. Overscroll Behavior: 控制滚动到视口边缘时的行为。
  15. Position: 定义元素的定位方式（如静态、相对、绝对、固定或粘性定位）。
  16. Top / Right / Bottom / Left: 定位元素时用于定义其偏移量。
  17. Visibility: 控制元素是否可见。
  18. Z-Index: 控制元素在层叠上下文中的堆叠顺序。

 

Flexbox & Grid：

  1. Flex Basis/Flex Direction/Flex Wrap/Flex/Flex Grow/Flex Shrink/Order: 这些都是Flexbox布局中的属性，用于控制弹性容器中子元素的排列、方向、换行、伸缩和顺序。
  2. Grid Template Columns/Grid Column Start / End/Grid Template Rows/Grid Row Start / End/Grid Auto Flow/Grid Auto Columns/Grid Auto Rows: 这些属性用于CSS Grid布局，定义了网格结构的列、行和自动填充行为。
  3. Gap: 用于定义网格间距或柔性容器中项目的间距。
  4. Justify Content/Justify Items/Justify Self: 这些属性用于控制Flexbox或Grid容器中子项的水平对齐方式。
  5. Align Content/Align Items/Align Self: 与Justify相关的属性，但用于控制垂直对齐。
  6. Place Content/Place Items/Place Self: 一种简写属性，同时设置对齐内容和项目的位置。

间隔：

  1. Padding: 内边距是元素内容周围的空间，位于元素的边框和内容区域之间。在Tailwind CSS中，内边距可以通过使用p-{size}的类来快速应用，例如p-4会应用到所有四个方向的内边距。

  2. Margin: 外边距是元素外部的空间，决定元素与其他元素之间的距离。在Tailwind CSS中，外边距可以通过使用m-{size}的类来设置，例如m-8表示在所有四个方向上应用较大的外边距。

  3. Space Between: 这通常指在Flexbox或Grid布局中元素之间的间隔。在Tailwind CSS中，可以使用space-{direction}-{size}的类来设置，例如space-x-2将在水平方向上的所有子元素之间应用间隔，而space-y-2则会在垂直方向上应用

尺寸：

  1. Width: 在CSS中，width属性用来控制元素的宽度。

  2. Min-Width: min-width属性确保元素至少有这么宽，不会比这个值更小。

  3. Max-Width: max-width属性用来设置元素的最大宽度，元素的宽度不会超过这个值。

  4. Height: height属性用于控制元素的高度。

  5. Min-Height: min-height属性用来确保元素至少有这么高，不会比这个值更矮。

  6. Max-Height: max-height属性用来设置元素的最大高度，元素的高度不会超过这个值。

  7. Size: 这通常指的是width和height的一个简写，用于同时设置元素的宽度和高度。

　　在Tailwind CSS框架中，这些属性可以通过对应的实用工具类来快速应用，例如：

  • w-{value}用于宽度，如w-64。
  • min-w-{value}用于最小宽度，如min-w-full表示最小宽度为父容器的100%。
  • max-w-{value}用于最大宽度，如max-w-xs。
  • 同样的规则适用于高度，使用h-{value}、min-h-{value}、max-h-{value}的类。

排版：

  1. Font Family: 设置文本的字体系列。
  2. Font Size: 设置文本的字体大小。
  3. Font Smoothing: 在某些浏览器中用于应用字体抗锯齿效果。
  4. Font Style: 设置文本的字体样式，例如斜体。
  5. Font Weight: 设置文本的字体粗细。
  6. Font Variant Numeric: 用于设置字体中的数字样式，例如旧式数字或小型大写数字。
  7. Letter Spacing: 设置字符之间的间距。
  8. Line Clamp: 用于限制文本显示为指定的行数，并在末尾添加省略号。
  9. Line Height: 设置文本行的高度。
  10. List Style Image: 使用图像作为列表项的标记。
  11. List Style Position: 设置列表项标记的位置。
  12. List Style Type: 设置列表项的标记类型，如实心圆、空心圆或数字。
  13. Text Align: 设置文本的水平对齐方式。
  14. Text Color: 设置文本颜色。
  15. Text Decoration: 设置文本的装饰，如下划线、删除线等。
  16. Text Decoration Color: 设置文本装饰的颜色。
  17. Text Decoration Style: 设置文本装饰的样式，如实线、虚线等。
  18. Text Decoration Thickness: 设置文本装饰的粗细。
  19. Text Underline Offset: 设置下划线相对于文本基线的偏移量。
  20. Text Transform: 控制文本的大小写。
  21. Text Overflow: 设置当文本溢出容器时的处理方式。
  22. Text Wrap: 控制文本的换行行为。
  23. Text Indent: 设置首行文本的缩进。
  24. Vertical Align: 设置元素的垂直对齐方式。
  25. Whitespace: 控制元素中的空白字符的处理。
  26. Word Break: 设置单词断行的规则。
  27. Hyphens: 控制单词内的连字符的使用。
  28. Content: 通常与伪元素::before和::after一起使用，用来插入额外的内容

背景：

  1. Background Attachment: 决定背景图像是固定的还是随着页面的其他部分滚动。

  2. Background Clip: 定义背景的绘制区域，如是否延伸到边框下面。

  3. Background Color: 设置元素的背景颜色。

  4. Background Origin: 指定背景图片的定位区域，如是否相对于边框、内边距或内容进行定位。

  5. Background Position: 设置背景图片的起始位置。

  6. Background Repeat: 定义背景图像是否和如何重复（平铺）。

  7. Background Size: 规定背景图像的大小，可以是固定的尺寸或者是相对于容器的百分比。

  8. Background Image: 用来设定元素的背景图像。

  9. Gradient Color Stops: 在创建渐变效果时，指定渐变中各个颜色的停靠点。

边框：

  1. Border Radius: 设置元素边框的圆角半径。
  2. Border Width: 定义元素边框的宽度。
  3. Border Color: 指定元素边框的颜色。
  4. Border Style: 设定元素边框的样式（如实线、虚线、点线等）。
  5. Divide Width: Tailwind CSS特有的，用于设置容器内元素之间分割线的宽度。
  6. Divide Color: Tailwind CSS特有的，用于设置容器内元素分割线的颜色。
  7. Divide Style: Tailwind CSS特有的，用于设置容器内元素分割线的样式。
  8. Outline Width: 设置元素外轮廓的宽度，轮廓与边框类似，但不占用空间，不影响布局。
  9. Outline Color: 定义元素外轮廓的颜色。
  10. Outline Style: 设定元素外轮廓的样式。
  11. Outline Offset: 设置轮廓与元素边缘之间的距离。
  12. Ring Width: Tailwind CSS特有的，用于创建围绕元素的轮廓（类似于阴影）的宽度。
  13. Ring Color: Tailwind CSS特有的，用于设置环形轮廓的颜色。
  14. Ring Offset Width: Tailwind CSS特有的，用于设置环形轮廓偏移的宽度。
  15. Ring Offset Color: Tailwind CSS特有的，用于设置环形轮廓偏移的颜色。
posted on 2023-11-05 14:10  黑逍逍  阅读(75)  评论(0)  编辑  收藏  举报