![](https://img-blog.csdnimg.cn/20201014180756928.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
TailwindCSS 通关指南
文章平均质量分 77
乐闻x
一个不安分的前端,还搞过两年后端开发
展开
-
React/Vue/Svelte 前端项目中开始使用TailwindCSS
TailwindCSS 的开始步骤看着比较多,但是真正按照步骤动手启动可能只需要几分钟,更多的内容是我想跟大家分享具体的使用经验,也方便大家能够对 TailwindCSS 有个较为清晰的理解。更多的 TailwindCSS 相关的内容分享,前往TailwindCSS 使用指南。原创 2023-12-08 11:30:30 · 771 阅读 · 0 评论 -
TailwindCSS 如何配置默认单位为px
当我们刚开始使用tailwindcss框架处理项目中的样式,我相信很多人会跟我一样非常不习惯。tailwindcss默认支持的rem单位,而不是我们已经非常习惯的px,这其实给我们带来了不小的心智负担。这篇文章将介绍如何在项目中使用px单位设置元素的属性。原创 2023-12-08 12:48:58 · 1162 阅读 · 0 评论 -
如何使用 TailwindCSS 画一条0.5px的线条
在移动端项目,一般为了让线条看起来更细、更锐利,此时使用0.5px的线条是非常合适的。那么如何使用TailwindCSS画一条0.5px的线条呢?在实现这个需求的时候,首先去TailwindCSS官网查了一下border有没有对应的内置工具类,发现内置的线条最细的是1px;所以我们需要自定义配置 TailwindCSS 的 `space`属性。下面将详细说明如何配置。原创 2023-12-18 23:25:34 · 773 阅读 · 0 评论 -
TailwindCSS 多主题色配置
想要配置不同的主题色,那么就希望配置的颜色可以在不同主题下进行变化。那么如何实现这样的能力呢?我们可以在最外层dom结构上配置不同的类,不同类下的颜色赋予不同值,那么就可以实现多种主题色的切换了,是不是感觉实现很简单,接下来介绍一下代码项目不同主题色的配置。以小程序(taro + react + rtk)进行介绍,其他原理类似首先需要建立一个主题文件夹放置我们需要配置的不同主题的csstheme/* text *//* text */原创 2023-12-10 23:56:55 · 964 阅读 · 0 评论 -
TailwindCSS 配置可视化检查器
TailwindCSS 框架为我们提供了大量默认的类和属性,而且开发者也能够自定义类和配置。对于初学者来说,这些配置其实是比较复杂的,这也是tailwindcss最大的入手成本,开发者的记忆负担和心智负担也都比较大。有没有办法能够直观的看到项目中实际有效的类和属性呢?原创 2023-12-10 23:50:05 · 274 阅读 · 0 评论 -
TailwindCSS 如何处理RTL布局模式
TikTok作为目前全世界最受欢迎的APP,需要考虑兼容全世界各个地区的本地化语言和阅读习惯。其中对于阿拉伯语、波斯语等语言的阅读书写习惯是从右向左的,在前端有一个专有名字RTL模式,即Right-to-Left。其中以阿拉伯语作为第一语言的人口超过2.92亿,对于这个庞大的市场,App、Web网站等都需要考虑RLT布局。那么TailwindCSS应该如何处理RTL布局模式?原创 2023-12-10 23:44:36 · 345 阅读 · 0 评论 -
TailwindCSS 支持文本文字超长溢出截断、文字文本省略号
文本文字超长截断并自动补充省略号,这是前端日常开发工作中常用的样式设置能力,文字超长截断主要分为单行超长截断和多行超长截断。本文通过介绍基本CSS样式、tailwindcss 类设置两种基础方式来实现文字超长截断。原创 2023-12-09 14:31:36 · 1839 阅读 · 4 评论 -
TailwindCSS 如何设置 placeholder 的样式
placeholder 在前端多用于 input、textarea 等任何输入或者文本区域的标签,它用户在用户输入内容之前显示一些提示。浏览器自带的 placeholder 样式可能不符合设计规范,此时就需要通过 css 进行样式美化。当项目中使用 TailwindCSS 处理样式时,应该如何通过 TailwindCSS 设置 placeholder 的样式呢?原创 2023-12-09 14:40:02 · 359 阅读 · 0 评论