我是有6年前端及跨平台开发经验、掘金/51CTO活跃作者、曾独立设计混开框架和重构方案并顺利落地 de 小鑫同学。...写作背景： 在热火朝天的前端框架演进的进程中，大多数的人都把目光关注到了 JavaScript / TypeScript 的身上，TailwindCSS作为最有争议但也是最受欢迎的一个 CSS 框架的产品我们也来看一下它到底好不好用...造成的样式文件增大； 避免了 css 修改造成了未知样式错乱带来问题； 与传统内联样式相比的优势： 实现的 UI 全部基于一套预定义功能类实现，UI 更加一致； 使用内置的功能类可以轻松实现内联样式无法实现的响应式布局和元素状态等...，在 Tailwind 中提倡移动端优先的理念，我们应该使用不带任何断点的功能类来实现移动端应该显示的风格，在浏览器尺寸变化到下一个断点的时候来调整为 PC 端显示的布局。...确实会有一些别扭，但是当我们在开发一些无法使用 UI 库的项目是就不得不面临编写大量 css 文件，还得考虑响应式布局，黑暗模式等等，但是这些对于 TailwindCSS 来说将是简单的，TailwindCSS
因此 Nuxt 引擎在运行应用程序时将无法找到它。...接下来，让我们看看如何利用 TaiwindCSS 在应用程序中构建和使用图标，而不是直接使用图像或 SVG 图标的经典方式。...我们可以为网站上显示的每个图标选择各种选项，从 Vue 组件和 React 组件到简单的 SVG 文件。 您可以下载所需图标的相关代码段并将其复制并粘贴到您的应用程序中。...该工具允许我们上传图像，它将以 TailwindCSS 格式生成四种主要调色板及其色调，如以下屏幕截图所示： 剩下的就是将生成的代码复制并粘贴到您的tailwind.config.ts文件中，然后您就可以在应用程序中使用调色板了...概括 在本教程中，我们学习了如何在 Nuxt.js 应用程序中安装和配置 TailwindCSS。
当我研究它的色彩系统的时候，我还发现它还提供了暗黑模式，这也算是色彩系统的一种吧，毕竟也是和色彩搭配有关。...本文就以 引发作者探索暗黑模式的背景 -> 暗黑模式起源以及重要性 -> tailwindcss + vue3 实践暗黑模式的思路来进行讲解。...在计算机诞生早期的时候，计算机的显示屏其实一直被「暗黑模式」所占据，这是因为在20世纪60~80年代的计算机显示器使用的是仅能支持单色显示的阴极射线管（CRT），黑底绿字的展示方式就成为了当时的常态。...再来看看近几年的《移动互联网行业分析报告》分析中，可以看出，越来越多的人选择在夜间/较为昏暗的场景下使用手机。...第二步 在 tailwindcss 中如果需要支持暗黑模式，还需要在 variants 中增加配置，例如以下我们让背景色和文字颜色支持了暗黑模式。
、内存、磁盘、网络和进程的使用情况和状态。...特征： 易于使用，带有受游戏启发的菜单系统 快速响应的 UI，带有 UP，DOWN 键可进行过程选择 显示所选进程的详细统计信息 可过滤流程 在排序选项之间轻松切换 将 SIGTERM，SIGKILL，...GitHub 地址→https://github.com/tailwindcss/tailwindcss 3....3.1 人人都是抠图师：Background-Matting 本周 star 增长数：600+ 图片背景处理器：Background-Matting 是一个基于背景抠图的工具，正如它的 slogan：The...人像卡通风格渲染的目标是，在保持原图像 ID 信息和纹理细节的同时，将真实照片转换为卡通风格的非真实感图像。作者的思路是，从大量照片/卡通数据中习得照片到卡通画的映射。
至于为什么不用，因为我需要在 content-scripts.js 中引入 element 组件，如果使用 babel-plugin-component 将无法按需导入组件以及样式（应该是只支持 vue...文件按需引入，总之就是折腾了我一个晚上的时间） 安装 tailwindcss 不过官方提供了如何使用 TailwindCSS，这里就演示一下 在 Vue 3 和 Vite 安装 Tailwind CSS...也顺带是复习一下 HTML 中鼠标事件和 vue 自定义命令了 功能实现 主要功能 检测视频页面，输出对应 up 主，关注数以及视频标题播放（参数过多就不一一显示了） 监控关键词根据内容判断是否点赞，...后续我都会使用 JQuery 来进行操作 在 src/content-script/bilibili.js 中写下如下代码 window.onload = function () { console.log...用过 Vue 的都知道写网页很方便，写 Chrome 插件未尝不是编写一个网页，当时的我在接触了 Vue 后就萌发了使用 vue 来编写 Chrome 的想法，当然肯定不止我一个这么想过，所以我在 github
但是当我深度使用 tailwindcss 之后，我觉得有必要重新审视这个痛点，它可能并不存在，因为有非常多的方式可以避免复杂的样式 举个例子，下面有一段代码，我们写了一大堆 className，并且他在多个元素中反复出现...在技术手段上，我们可以继续在 css 中运用 tailwindcss。...我们在 css 中定义如下的两个样式用于设置背景色 .red { background-color: #f44336; } .orange { background-color: orange;...我们都知道，使用一个插件 IntelliSense 可以在 html 中编写 css 的时候，会自动提示相关的 tailwindcss 属性值。...在 webstorm 中，打开配置文件，搜索 tailwindcss，然后找到 experimental.classRegex 字段，在里面添加正则即可。
比如，我让chatGPT生成上面提到的天气预报组件。...下面截取了他返回代码的一部分，注意其中红框中组件背景色是白色： 现在，我继续提问：「背景请使用渐变蓝色」，chatGPT重新输出了组件代码，并把背景色改为渐变蓝色： 可以看到，每次提出修改意见，chatGPT...UI与样式分离 v0生成的React组件代码中，样式与UI分别基于两个库： 样式：基于TailwindCSS UI：基于shadcn[2] 样式部分 为什么生成代码的样式部分要使用TailwindCSS...在我上一篇讲TailwindCSS的文章中我提到一个观点 —— 随着AI生成代码的普及，类似TailwindCSS这样的「原子化CSS」会越来越普及。...生成的原型代码中，UI与样式分离，其中： UI：基于shadcn 样式：基于TailwindCSS UI部分之所以基于shadcn，显然是为了开发者导出代码后，可以方便的二次开发。
但现在它只支持纯 javascript、ReactJs、VueJs 和 Jquery！...它以响应方式显示在许多不同的设备屏幕上，并且易于与当今流行的 JS 框架（如 React、Angular、Aurelia、Vue 和 Svelte）一起使用。...53、Codeimg 地址：https://codeimg.io/ Codeimg 是一种工具，可帮助我们通过具有许多支持功能的图像显示代码，例如选择背景主题、指定颜色、字体大小、代码语言... 54...59、Pretty Snap 地址：https://prettysnap.app/ Pretty Snap 是一种工具，可帮助我们为要在网页中显示的图像创建漂亮的背景。...我喜欢这个网站的地方是我们可以立即在该工具的网站中应用我们想要的背景。
端午三天，你们在放假，而我，一个人躲在家里，苦练 tailwindcss。...我在准备这样一个学习项目，它与传统的文章/视频类学习不同，我会在教程中内置大量的可交互案例，提供沉浸式的学习体验，并且还可以支持实时修改代码观察案例更改结果。大家可以期待一下。...经过这个项目的历练，现在，我已熟练度拉满，彻底拿捏了 tailwindcss。 魔功大成！ 这篇文章，就跟大家分享一下我在 tailwindcss 中已经使用到的高级用法。...我写的文章内容，源文件是 .md 格式，此时如果我想要在 .md 中使用 tailwindcss，那么就需要将其转换为 html 之后再适配 tailwindcss，我们就可以这样配置 const remark...5、总结 实践中的需求非常复杂，每个团队对于 UI 的设计规范不同，那么默认样式就很难满足所有团队的需求，因此，掌握如何将 tailwindcss 配置为你的形状，是在团队中推广和运用它的必要条件。
配置 tailwindcss 为了方便,我这边使用了 tailwindcss，因为我可以使用 tailwindcss-typography 这个插件，帮我生成漂亮的文章类型排版。...状态保持 与浏览器标签不一样的是，当 webview 移动到后台又再次显示时，webview 中的任何状态都将丢失。因为 webview 是基于 iframe 实现的。...state 在 webview 的 js 中我们可以使用vscode.getState()和vscode.setState()方法来保存和恢复 JSON 可序列化状态对象。...注册方法：vscode.window.registerWebviewPanelSerializer retainContextWhenHidden 对于具有非常复杂的 UI 或状态且无法快速保存和恢复的...希望这篇文章对大家有所帮助，也可以参考我往期的文章或者在评论区交流你的想法和心得，欢迎一起探索前端。
一） 微言码道的官网是我在2021年初花了约三天时间完成的。当时的版本是基于gatsby以及MUI构建而成。 由于是基于Jamstack理念而构建的这个网站，网站是从零开始构建的，包括UI。...好，再说到tailwindcss这个吧。 最开始也是一个前端的程序员朋友在一次聊天时，无意间谈及并推荐了这个CSS框架。...针对前端开发中，CSS存在大量重复并且难以命名的难点，tailwindcss基于CSS定义了一整套内置的可反复重复使用的CSS定义。...关于tailwindcss，能说的其实挺多，这次我就基于我使用它的体验说下我觉得它的优点 优势一：减轻了编写CSS的负担 编写CSS的开发人员,有两大众所周知的难点，一是CSS命名，二则是重复CSS定义...这个DIV默认是文字是黑色，但在暗黑模式下为白色 以上述这个tailwindcss定义为例，你可以在同一个class中定义对不同设备的显示效果。
这种打包形式目前已知的问题包括 在NextJs无法使用，因为Next是约定式导入样式文件，仅允许在_app.tsx文件中导入样式 正常项目未配置less-loader无法使用，怎么会有组件库打包继续使用...所以我对比tailwindcss和windicss后选择了tailwindcss 一方面，经过调研，常规认知中tailwindcss的卡顿特性，随着“JIT”模式的推出，已经消失得一干二净。...postcss来引入tailwindcss，我们尽量保证生产和开发一样。...同时我建议在global.css中配置需要全局引入的css postcss-import会把这份文件打包在一起 注意！...部分，用于打包出组件库 后边这里则生成.d.ts，提供类型支持 在vite的plugins中配置
比如我想要一个 margin: 1px 这样的属性，我只需要输入 m1 然后回车，就可以直接得到 m-1 的显示结果。...然后在 tailwindcss 中，我只需要加个前缀 md:w-32，轻松搞定。而且他默认给定的断点数值跟我的工作经验中得到的结论是比较一致的。...在 tailwindcss 中写媒体查询就非常简单了 ✓tailwindcss 的约定是移动端优先，因此这里的小屏幕尺寸直接使用...这些库和 Tailwind UI 本身都需要 React >= 16。 4、在 vite + react 中引入 具体如何引入，有许多文章都有说，大家可以用的时候针对性的去寻找解决方案。...我在群里讨论的时候，发现大多数群友都已经用上了，他们比我有经验得多，在群友的指导和分析利弊之下，我选择了它，也推荐给还没开始用的道友们去试试
配置 tailwindcss 为了方便,我这边使用了tailwindcss，因为我可以使用 tailwindcss-typography 这个插件，帮我生成漂亮的文章类型排版。...状态保持 与浏览器标签不一样的是，当 webview 移动到后台又再次显示时，webview 中的任何状态都将丢失。因为 webview 是基于 iframe 实现的。...state 在 webview 的 js 中我们可以使用vscode.getState()和vscode.setState()方法来保存和恢复 JSON 可序列化状态对象。...注册方法：vscode.window.registerWebviewPanelSerializer retainContextWhenHidden 对于具有非常复杂的UI或状态且无法快速保存和恢复的webview...希望这篇文章对大家有所帮助，也可以参考我往期的文章或者在评论区交流你的想法和心得，欢迎一起探索前端。
在本篇技术博客中，我们将深入了解 Tailwind CSS 的主题和使用。...add tailwindcss 安装完成后，可以通过运行以下命令来生成默认的配置文件和样式表： npx tailwindcss init 生成的默认配置文件名为 tailwind.config.js，...假设我们要创建一个带有蓝色背景和居中文本的按钮，可以这样写： ...Click me 在这个例子中，我们使用了 bg-blue-500 类来设置按钮的背景颜色为蓝色，text-white 类来设置文本颜色为白色，font-bold 类来设置文本加粗，...让我们在 tailwind.config.js 中添加一些自定义配置： /** @type {import('tailwindcss').Config} */ export default { content
文件中引入这个文件 对于没有使用tailwindcss的主题，其实完成前两步就好了，但是对于使用了tailwindcss的主题，由于它还有一个编译的过程，根据你指定的content内容的匹配目录，如./...比如说我对主题加自定义的css文件，就只经历这个步骤就可以。在head.html文件中加入这段。...如果你使用过其它的模板引擎，比如说比较老牌的smarty，比如说django中的形如{% extends "base_generic.html" %}，甚至我觉得java中的mybatis都属于一种模板引擎...所以，如果有个工具能把bootstrap中自适应的语法跟一些区域排列等的好工具的优秀功能都集成到一块就好了，这样你定义类或者id的时候，只要把这些好工具中用来定制界面显示效果的语法都往上堆，整个界面就适配所有屏幕...当然tailwindcss的使用过程还是有很多技巧的，我自己也在摸索中，有什么新的想法再写文章分享。今天这篇有关如何使用tailwindcss自定义hugo主题的文章至此分享结束，感谢阅读。
在这篇文章中，我们将了解如何使用 CSS 函数color-mix()和 CSS 变量，通过 TailwindCSS 高效地为 Nuxt 应用程序生成自定义调色板。...先决条件 最好使用以下命令设置 Nuxt 应用程序： npx nuxi init tailwindcss-color-mix 在安装提示期间选择 TailwindCSS 作为依赖项是最好的。...}, } 了解调色板变体 TailwindCSS 调色板是一组颜色，分为两个部分：较浅的颜色（色调变体）和较深的颜色（阴影变体）。..., 500, 600, 700, 800, 900] 我们现在将看到整个调色板显示在浏览器中： 伟大的。...概括 color-mix()在本教程中，我们简要学习了如何在 TailwindCSS-Nuxt 支持的应用程序中使用 CSS 函数、var()CSS 变量和 JavaScript构建颜色变体调色板。
网页也能成功显示效果，但是在 IOS 与 Android 中绝大多数情况下是不显示的。...模拟器无法请求本地 api 由于一开始是在 Web 端进行调试开发的，所以没留意到这个问题，直到切换到安卓模拟器之后发现模拟器无法请求本地后端服务，在IOS 端暂无这问题。...组件库的选择 如今在 UI 的选择上，我是毫不犹豫选择 Tailwindcss，在 RN 使用 Tailwindcss 有两个库可以作为选择 nativewind 和 twrnc。...但他的颜色更是一言难尽了，从 color0 到 color11 的效果就如下图 可能是因为我用惯了 Tailwindcss 那套颜色系统，所以很不能理解这套颜色系统，并且在我实际编写组件的过程也是异常的奇怪...但事实上在我编写的过程中，想要一套代码就能实现跨三端(web,android,ios) 效果并不佳了，这在下一章便会说到。
基础背景 我使用的 AI 工具是安装在自己 Slack 频道的 Claude App； 我对 Tailwind CSS 的实现原理一无所知，我只知道简单的使用方法。...除此之外,Tailwind CSS 还有很多其他的 variant,可以在官方文档中找到:[https://tailwindcss.com/docs/variants](https://tailwindcss.com...经过直接提问发现无法得到我想要的答案，于是我开始尝试从实现原理层面进行引导，让 AI 帮忙生成解决方案，我尝试过如下提问： 如何创建类似 dark:* 的自定义形式 Tailwind CSS 如何自定义实现类似...掌握好了 variants,可以极大提高在 Tailwind 中写 CSS 的能力。总之,variants 是一个非常强大而又重要的 Tailwind CSS 功能,值得深入学习和使用。...经过了漫长的无效提问后我开始反思，我在处理问题的过程中太执着于让 AI 直接帮忙生成解决方案了，于是我又转换思路：先让 AI 帮忙阐述实现原理，再从原理入手生成解决方案。
每个项目都有 awesome ，TailwindCSS 也有 awesome-tailwindcss, 你可以在这里找到插件、工具、 组件资源库、以及脚手架和学习资源。...但上面的资源太多了，下面是我将推荐我个人认为比较好用的资源。...推荐内容 Tailwind CSS IntelliSense VScode 插件，官方维护，提供代码自动补全，语法高亮，代码样式显示等。...Headless UI 官方维护的组件库，支持 React 和 Vue，在官网可以直接看到效果，可以直接拷贝代码，可以说非常好用，缺点就是组件太少。...最后 以上就是推荐的全部内容，如果有小伙伴们有好用的 Tailwind 资源可以在评论区留言。 希望这篇文章对大家有所帮助，也可以参考我往期的文章或者在评论区交流你的想法和心得，欢迎一起探索前端。
领取专属 10元无门槛券
手把手带您无忧上云
