三、自定义主题 1.参数单位 bg-[#00d1ad] rounded-[300px] px-[3.2rem] 在tailwindcss.config里添加: extend:{ colors:{ mint:{ DEFAULT:”#00d1ad”, 50:”#eefffa”, 100:”#c6fff0” } }, spacing:{ “128”:”32rem”, “144”:”36rem” } borderRadius:{ “4xl”:”2rem” }...
使用Tailwind CSS,无需编写一行 CSS 即可重新创建此按钮,而是使用一堆低级实用程序类: Example 可以看到,这里使用了很多类来为之前相同的按钮样式设置样式,但每个类只管理一个或几个经常一起使用的CSS属性。这些类的命名描述了它们的功能:inline-block将CSS的display属性设置为display: inline-block;,bg-transparent...
• block: 设置元素为块级元素,相当于 display: block; • inline: 设置元素为行内元素,相当于 display: inline; • flex: 设置元素为弹性盒,相当于 display: flex; • inline-flex: 设置元素为内联弹性盒,相当于 display: inline-flex; 3.3.2 定位类 这些类用于控制元素的定位。 • static: 默认...
Tailwind CSS 提供了大量实用类,涵盖了样式设计的各个方面,如布局、间距、排版、颜色等。这些类遵循的命名规则可以让你直观地了解它们的用途。 让我们来探讨一下 TailwindCSS中的一些常用实用类。 Tailwind 布局类 flex:应用弹性容器。 grid:应用网格容器。 block:将元素显示为块级元素。 inline:将元素显示为内联级...
提交<!-- JS link --> CSS代码: * {box-sizing: border-box;} body{display: flex;flex-direction: column;align-items: center;justify-content: center;height:100vh;overflow: hidden;margin:0;} .background{background:url(...
block: 块级元素显示 md:inline: 在中等屏幕大小以上以内联形式显示 3.1.7 Flex 类 Flex 类用于实现弹性布局。示例: flex: 使用弹性布局 justify-between: 在主轴上居中对齐 3.1.8 伪类和状态类 Tailwind 还提供了伪类和状态类,用于处理特定状态下的样式。示例: ...
theme}) => { addComponents({ '.card': { display: 'inline-block', padding: ...
使用inline、inline-block和block来控制文本和元素的流动。 vue3示例: <template> <!-- inline:将元素设置为行内元素 inline-block:将元素设置为行内块元素 block:将元素设置为块元素 --> 正常是块级元素 display: inline 能够在一行内显示,不能设置宽高 display: inline-block 能够在一行内显示且可以设置宽...
tailwindcss 系列 Display Display 包含三种情况block inline-block inline 效果如下图 代码实现 block 1 2 3 inline-block 1
但是Tailwind 并不提供组件,而是基于Utility构建CSS,希望提供一套完整的,最小单位的工具类CSS,这样就可以给开发人员最大的自由度,由他们去组合使用这些内容。而这就是它原子化的理念。 简单来做一个对比,更容易让你明白这里面的差别: <!-- CSS --> 点击 <!-- tailwindcss --> 点击 <!-- bootstrap--> ...