tailwindcss大纲

本文主要是介绍tailwindcss大纲，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

布局

css	说明	地址
aspect-ratio	用于控制元素纵横比	Aspect Ratio - Tailwind CSS
width <br />max-width	container：用于将元素的宽度固定到当前断点的组件	Container - Tailwind CSS
columns	用于控制元素内列数	Columns - Tailwind CSS
break-after	用于控制列或页在元素之后应如何换行的实用程序 【打印】	Break After - Tailwind CSS
break-before	用于控制列或页在元素之前应如何中断的实用程序 【打印】	Break Before - Tailwind CSS
break-inside	用于控制列或页面在元素中应如何中断的实用程序	Break Inside - Tailwind CSS
box-decoration-break	用于控制元素片段应如何跨多行、多列或多页呈现	Box Decoration Break - Tailwind CSS
box-sizing	用于控制浏览器应如何计算元素的总大小	Box Sizing - Tailwind CSS
display	用于控制元素的显示框类型	Display - Tailwind CSS
float	元素浮动	Floats - Tailwind CSS
clear	清除浮动元素	Clear - Tailwind CSS
isolation	用于控制元素是否应显式创建新的堆叠上下文	Isolation - Tailwind CSS
object-fit	调整大小以覆盖容器	Object Fit - Tailwind CSS
object-position	定位被替换的元素	Object Position - Tailwind CSS
overflow	溢出的内容显示方式	Overflow - Tailwind CSS
overscroll-behavior	滚动行为，用于控制浏览器在到达滚动区域边界时的行为方式	Overscroll Behavior - Tailwind CSS
position	位置	Position - Tailwind CSS
inset<br /> left <br /> right <br /> top <br /> bottom <br /> inset-inline-start <br /> inset-inline-end	上/右/下/左	Top / Right / Bottom / Left - Tailwind CSS
visibility	显示隐藏	Visibility - Tailwind CSS
z-index	用于控制元素的堆栈顺序	Z-Index - Tailwind CSS

Flex布局

css	说明	地址
flex-basis	定义了在分配多余空间之前，项目占据的主轴空间	Flex Basis - Tailwind CSS
flex-direction	决定主轴的方向	Flex Direction - Tailwind CSS
flex-wrap	如果一条轴线排不下，如何换行	Flex Wrap - Tailwind CSS
flex	flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选。	Flex - Tailwind CSS
flex-grow	定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。	Flex Grow - Tailwind CSS
flex-shrink	定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。	Flex Shrink - Tailwind CSS
order	用于控制 flex 和网格项顺序	Order - Tailwind CSS
justify-content	定义了项目在主轴上的对齐方式	Justify Content - Tailwind CSS
align-items	定义项目在交叉轴上如何对齐	Align Items - Tailwind CSS
align-self	允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。	Align Self - Tailwind CSS

Grid布局

css	说明	地址
grid-column	用于控制元素在网格列中的大小和放置方式	Grid Column Start / End - Tailwind CSS
grid-template-rows	用于指定网格布局中的行的实用程序	Grid Template Rows - Tailwind CSS
grid-row	用于控制元素在网格行中的大小和放置方式	Grid Row Start / End - Tailwind CSS
grid-auto-flow	用于控制如何自动放置网格中元素	Grid Auto Flow - Tailwind CSS
grid-auto-columns	用于控制隐式创建的网格列大小	Grid Auto Columns - Tailwind CSS
grid-auto-rows	用于控制隐式创建的网格行的大小	Grid Auto Rows - Tailwind CSS
gap <br /> column-gap <br /> row-gap	设置元素之间的间隙	Gap - Tailwind CSS
justify-items	用于根据网格项的内联轴对齐方式	Justify Items - Tailwind CSS
justify-self	用于根据网格属性的值对齐项	Justify Self - Tailwind CSS
align-content	对齐内容	Align Content - Tailwind CSS
place-content	用于控制内容如何同时对齐	Place Content - Tailwind CSS
place-items	用于将栅格项放置在两个轴上的栅格区域	Place Items - Tailwind CSS
place-self	用于控制如何同时对齐单个项目进行对齐	Place Self - Tailwind CSS

间距

css	说明	地址
padding padding-left padding-right padding-top padding-bottom padding-inline-start padding-top padding-inline-end padding-right	内边距	Padding - Tailwind CSS
margin margin-left margin-right margin-top margin-bottom margin-inline-start margin-top margin-inline-end margin-right	外间距	Margin - Tailwind CSS
margin-left margin-top --tw-space-y-reverse --tw-space-x-reverse	用于控制子元素之间空间的实用程序	间距 - 顺风 CSS (tailwindcss.com)

大小

css	说明	地址
width	宽度	Width - Tailwind CSS
min-width	最小宽度	Min-Width - Tailwind CSS
max-width	最大宽度	Max-Width - Tailwind CSS
height	高度	Height - Tailwind CSS
min-height	最小高度	Min-Height - Tailwind CSS
max-height	最大高度	Max-Height - Tailwind CSS
width height	大小	Size - Tailwind CSS

字体

css	说明	地址
font-family	字体	Font Family - Tailwind CSS
font-size line-height	字体大小、行高	Font Size - Tailwind CSS
-webkit-font-smoothing、 -moz-osx-font-smoothing	字体平滑	Font Smoothing - Tailwind CSS
font-style	字形	Font Style - Tailwind CSS
font-weight	字体粗细	Font Weight - Tailwind CSS
font-variant-numeric	字体变体 Numeric	Font Variant Numeric - Tailwind CSS
letter-spacing	字母间距	Letter Spacing - Tailwind CSS

列表

css	说明	地址
list-style-image	列表样式图像	List Style Image - Tailwind CSS
list-style-position	列表样式位置	List Style Position - Tailwind CSS
list-style-type	列表样式类型	List Style Type - Tailwind CSS

文本

css	说明	地址
text-align	文本对齐	Text Align - Tailwind CSS
color	文本颜色	Text Color - Tailwind CSS
text-decoration-line	文字修饰	Text Decoration - Tailwind CSS
text-decoration-color	文字装饰颜色	Text Decoration Color - Tailwind CSS
text-decoration-style	文字装饰风格	Text Decoration Style - Tailwind CSS
text-decoration-thickness	文字装饰粗细	Text Decoration Thickness - Tailwind CSS
text-underline-offset	文本下划线偏移量	Text Underline Offset - Tailwind CSS
overflow、display、-webkit-box-orient、 -webkit-line-clamp	省略显示	Line Clamp - Tailwind CSS
line-height	线高	Line Height - Tailwind CSS
text-transform	文本转换	Text Transform - Tailwind CSS
overflow text-overflow white-space	文本溢出	Text Overflow - Tailwind CSS
text-overflow	文本溢出	Text Overflow - Tailwind CSS
text-wrap	文本换行	Text Wrap - Tailwind CSS
text-indent	文本缩进	Text Indent - Tailwind CSS
vertical-align	垂直对齐	Vertical Align - Tailwind CSS
white-space	空白	Whitespace - Tailwind CSS
word-break overflow-wrap	分词符	Word Break - Tailwind CSS
hyphens	连字符	Hyphens - Tailwind CSS
content	内容	Content - Tailwind CSS

背景

css	说明	地址
background-attachment	背景附件	Background Attachment - Tailwind CSS
background-clip	背景剪辑	Background Clip - Tailwind CSS
background-color	背景颜色	Background Color - Tailwind CSS
background-origin	背景起源	Background Origin - Tailwind CSS
background-position	背景位置	Background Position - Tailwind CSS
background-repeat	背景重复	Background Repeat - Tailwind CSS
background-size	背景尺寸	Background Size - Tailwind CSS
background-image	背景图片	Background Image - Tailwind CSS

边框

css	说明	地址
border-radius	边框半径	Border Radius - Tailwind CSS
border-width	边框宽度	Border Width - Tailwind CSS
border-color	边框颜色	Border Color - Tailwind CSS
border-style	边框样式	Border Style - Tailwind CSS

这篇关于tailwindcss大纲的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---