tailwindcss 默认支持灵活设置元素距离属性,比如给div加一个16px的内边距,在属性后通过[]来设置具体的px; index 效果图 TailwindCSS 设置文字大小 方案二 通过修改tailwind.config.js配置文件中的theme属性,比如说我想配置成0 ～ 1000 这个范围内的数字都是px单位,具体配置如下 /** @type {import('tailwindcss')....
只要在标准设备尺寸下将tpx始终保持为 1px 的大小,我们就可以继续沿用 TailwindCSS 的“1 个基本单位为 4px”的规则。 以下是一些具体案例: 在标准设备尺寸下使用 rem 布局,RootFontSize 为 100px,tpx为0.01rem,即100px \* 0.01 = 1px。 在标准设备尺寸下使用 rem 布局,RootFontSize 为 16px,tpx为0.0625rem...
w-1,表示 宽度是一个单位,一个单位在tailwindcss里是 1/4 rem。1rem 默认是4px。 w-96,这个96是最大的数字,刚好一般的手机能容纳下这个宽度。 不过还是能有自定义的宽度,例如 w-[100px] 实际上还有不同的百分比布局 颜色虽然没有那么自由了,但是实际上这些颜色都是设计师精心设计好的,不用我们自己再去思...
相比bootstrap，semantic ui antd这些组件库，tailwind只是个css库，简单地说就是可以完成任何ui交互，而上面的组件库一般就是做个后台应用，所以使用tailwind的环境更广泛一些。几个亮眼的地方 首先是响应式设计。css的媒体查询写起来还是比较麻烦的，如下：@mediaonly screen and (max-width:760px) { .navbar ...
如果说它仅仅是简单的原子化CSS，好用却不亮眼。但是它却不仅仅止于此。1. 方便性:text-center、grid...
// tailwind.config.js const tailwindcssPxPlugin = require('tailwindcss-add-px') const classPxOptions = { width: [10], height: [10], inset: [50] } module.exports = { mode: 'jit', // 支持开发编译 // ... plugins: [ tailwindcssPxPlugin(classPxOptions) ] } ...
同一个界面既要适配mobile又要适配pc,而设计为了适配性,pc端做了一些简化,但是content固定宽度是520px,mobile上宽度当然可以用w-full来搞,但是520px,这个值如果不用单独写css,如何只用tailwind来搞定呢? image.png 可以在tailwind.config里面设置自定义width,然后用的时候直接w-520px即可, ...
现在流行的就是viewport方案了,也可能有的项目还在用flexable方案,但是我们又不想手动换算px到rem或vw,虽然社区也有类似pxtorem或者pxtovw这种postcss的插件,但解决问题的方法还是不够优雅,可能是因为插件的维护的不积极,可能是插件不好用,不兼容postcss8(pxtovw说的就是你😤),既然我们都有tailwindcss了,那就让这些...
Tailwind CSS text-color测试 上述一段代码，意思是：屏幕小于640尺寸为红色，640-1024尺寸显示为黄色，1024-1280尺寸显示为绿色，大于1280尺寸显示为蓝色。这意味着未加前缀的类对所有屏幕尺寸都有效，而带前缀的类仅在指定的断点及以上断点生效。几个小技巧 可以使用max-w-sm限定此网页为移动端，在浏览器也只显示...
因为 tailwindcss 的第一个断点屏幕尺寸是 640px,但其实最大的手机屏幕宽度也不过 480px,所以,如果你有一些针对手机端的特殊布局,可以考虑加一个断点: // tailwind.config.js module.exports = { ...,// 其他配置 theme: { screens: { xs: '480px', ...defaultTheme.screens, }, }, } 针对以上...