Tailwind CSS 是一个功能丰富的 CSS 框架,它允许开发者通过类名快速构建界面。lg:px-4是 Tailwind CSS 中的一个响应式类,用于在大屏幕设备上设置元素的左右内边距为 1rem(默认情况下,Tailwind CSS 中的1px等于0.25rem,所以4px等于1rem)。 基础概念
根据需要选择其他的功能插件，例如：Babel, Router, Vuex, CSS Pre-processors, Linter。
对齐类:如items-center(垂直居中)、justify-center(水平居中)、center(水平和垂直居中)等,用于控制元素的对齐方式。 间距类 外边距类:如m-4(外边距为4)、mt-2(顶部外边距为2)、mr-auto(右侧外边距为自动)等。 内边距类:如p-2(内边距为2)、py-4(垂直方向内边距为4)、px-auto(水平方向内边距为自动)等。
space-x-4, 子元素之间间距 4px,space-y-4 同理4. 边框、弧度边框宽度 通过border-value 设定线宽,颜色的设置也很简单:border-颜色-数值。 border-t|b|l|r: 上|下|左|右边框. 如 border-t-2 即 border-top-width: 2px; border-x|y:横向|纵向 边框 不加value 时,默认 value 为 1px边框...
Click me • 在上面的例子中,使用了一些常用的 tailwindcss 类名,如 container 用来创建一个居中容器,text-center 用来居中文 本,bg-blue-500 用来设置按钮的背景颜色为蓝色,等等。 3. 自定义样式 • tailwindcss 提供了自定义配置的选项,可以使用它来添加自定 义的样式。 // ={ theme: { extend:...
const plugin = require('tailwindcss/plugin'); module.exports = plugin(function({ addUtilities }) { addUtilities({ '.colorAbout': { background: 'blue', color: 'red' }, '.textAbout': { 'font-size': '20px' } }) }) const plugin = require('tailwindcss/plugin'); module.exports =...
vscode支持tailwind css插件,方便我们快速编码 需要开启配置项 结果如下 六、结语 上面的内容只是Tailwind的一部分功能,Tailwind还支持自定义字体大小、宽度、前缀等 例如 text-[14px] = font-size:14px hover:text-[15px] = :hover{font-size:15px} 具体的功能可以再详细的去探索...
font-size: 16px; // ... } mock 1. 2. 3. 4. 5. 6. 以上代码就是举个例子,大部分情况应该都是写一个类,然后整一堆样式进去。这种方式写多了以后,会感受到一些痛点,比如说: 1) 取名困难,节点结构一多,取名真的是个难事。当然了,我们可以用一些规范或者选择器的方式去规避一些取名问题。 2) ...
3210jr/blog.tailwindcss.comPublic forked fromtailwindlabs/blog.tailwindcss.com NotificationsYou must be signed in to change notification settings Fork0 Star2 Latest commit adamwathan Upgrade Next Sep 26, 2021 7cdfe39·Sep 26, 2021 History
px(5), }, fontSize: { ...rem(12), ...rem(13), } 4. 不建议使用 @apply Adam Wathan (Tailwind’s creator) 曾公开表示过,@apply 只是那些因为类名列表过长的人来使用这个框架取巧的一种方式。 从@apply 的功能上来说,这会生成新的功能类,产生多余的 css,我们应尽量不使用它,这与 Tailwind...