，我想是时候可以分享点一些东西了。...模拟器无法请求本地 api 由于一开始是在 Web 端进行调试开发的，所以没留意到这个问题，直到切换到安卓模拟器之后发现模拟器无法请求本地后端服务，在IOS 端暂无这问题。...但他的颜色更是一言难尽了，从 color0 到 color11 的效果就如下图 可能是因为我用惯了 Tailwindcss 那套颜色系统，所以很不能理解这套颜色系统，并且在我实际编写组件的过程也是异常的奇怪...但最让我想吐槽的是官方还为此提供了一个主题系统配置的生成器网站，但只有 tamagui 的赞助者才能够使用，如果想要自己定义一个主题，就需要配置特别多的文件，总之就是很难用就对了。...左侧抽屉 https://reactnavigation.org/assets/navigators/drawer/drawer.mp4 expo 官方所提供的左侧抽屉是带导航的，也就是说你无法同时使用底部选项和左侧抽屉两个布局效果
我们还将了解如何将 SVG 图标与 TailwindCSS 一起使用，而不是直接使用图像或 SVG 图标，以及如何基于给定图像为 TailwinCSS 构建自定义调色板。...TypeScript 中，因此 Nuxt 引擎在运行应用程序时将无法找到它。...此方法接受一个集合对象，其中包含要在应用程序中使用的图标包数组，如下所示： //**tailwindcss.config.ts */ module.exports = { plugins: [...，其中键是颜色的深浅（通常从 50 到 900），值是颜色代码。...该工具允许我们上传图像，它将以 TailwindCSS 格式生成四种主要调色板及其色调，如以下屏幕截图所示： 剩下的就是将生成的代码复制并粘贴到您的tailwind.config.ts文件中，然后您就可以在应用程序中使用调色板了
本文就以 引发作者探索暗黑模式的背景 -> 暗黑模式起源以及重要性 -> tailwindcss + vue3 实践暗黑模式的思路来进行讲解。...第二步 在 tailwindcss 中如果需要支持暗黑模式，还需要在 variants 中增加配置，例如以下我们让背景色和文字颜色支持了暗黑模式。...因此我们需要在暗黑模式下选择一个颜色较浅的色彩值。...https://github.com/hua1995116/dark-mode 获取。...感想 以上我们通过了 探索暗黑模式的背景 -> 暗黑模式起源以及重要性 -> tailwindcss + vue3 实践暗黑模式的思路向大家讲解了如何用 tailwindcss 适配 暗黑模式，最初的起源只是因为想找到一个文档站点
我是有6年前端及跨平台开发经验、掘金/51CTO活跃作者、曾独立设计混开框架和重构方案并顺利落地 de 小鑫同学。...写作背景： 在热火朝天的前端框架演进的进程中，大多数的人都把目光关注到了 JavaScript / TypeScript 的身上，TailwindCSS作为最有争议但也是最受欢迎的一个 CSS 框架的产品我们也来看一下它到底好不好用...； 与传统内联样式相比的优势： 实现的 UI 全部基于一套预定义功能类实现，UI 更加一致； 使用内置的功能类可以轻松实现内联样式无法实现的响应式布局和元素状态等。...，在 Tailwind 中提倡移动端优先的理念，我们应该使用不带任何断点的功能类来实现移动端应该显示的风格，在浏览器尺寸变化到下一个断点的时候来调整为 PC 端显示的布局。...确实会有一些别扭，但是当我们在开发一些无法使用 UI 库的项目是就不得不面临编写大量 css 文件，还得考虑响应式布局，黑暗模式等等，但是这些对于 TailwindCSS 来说将是简单的，TailwindCSS
第二步：将Tailwind.css集成到你的React项目中 要在你的React应用程序中使用Tailwind.css，你需要将它包含到你的项目中。...在你的src文件夹中创建一个名为tailwind.css的新文件，并导入Tailwind的基础、组件和实用工具： @import 'tailwindcss/base'; @import 'tailwindcss...对于你想要在暗黑模式下更改的每个样式，你需要在其前面加上dark:前缀。...结束 由于文章内容篇幅有限，今天的内容就分享到这里，文章结尾，我想提醒您，文章的创作不易，如果您喜欢我的分享，请别忘了点赞和转发，让更多有需要的人看到。...同时，如果您想获取更多前端技术的知识，欢迎关注我，您的支持将是我分享最大的动力。我会持续输出更多内容，敬请期待。
当我得知在 tailwindcss 的生态中，能够支持 React Native 时，我感觉有点激动啊！因为我确实不太喜欢 RN 中样式的语法设计。...由于这种写法，我甚至都不太想开发 React Native 的项目。 直到我苦练并熟练掌握了之后 tailwindcss，我才又重新找回了对 React Native 的热情。真是不容易啊！... 难点与实现原理 tailwindcss 无法直接支持 React Native。因为 RN 并不支持 css。...tailwind 也只能将 className 编译成对应的 css 代码。 所以想要在 RN 项目中直接使用 tailwindcss 是有难度的。...例如我定义一个css样式 .bg-red2 { background-color: red; } 然后运用到组件中 这样红色的背景就直接生效了.
但是写内联样式显得组丑陋影响阅读，并且样式不易于复用，同时伪元素与媒体查询无法实现，但是封装成类样式，又会影响到全局作用域，所以便有了局部样式styles.module.css 。...最主要的是，css 都写在 css 文件中，无法处理动态 css。...原子类 简单说，就是将常用的 css 样式都封装完，只需要在 class 中引入即可 这里选用当红框架 Tailwind CSS 作为演示。...class='flex'>tailwindcss 贴一张官方演示图，把大部分常用的样式都封装成 class 官方在线例子（下图） Tailwind Play (tailwindcss.com)...说说我目前 react 所选的操作，tailwind（原子类）+ CSS modules，写一些小项目或者 demo 甚至都没必要写 css 代码，毕竟 css 是大多数前端程序员都不是那么想写的（包括我
比如，我让chatGPT生成上面提到的天气预报组件。...下面截取了他返回代码的一部分，注意其中红框中组件背景色是白色： 现在，我继续提问：「背景请使用渐变蓝色」，chatGPT重新输出了组件代码，并把背景色改为渐变蓝色： 可以看到，每次提出修改意见，chatGPT...在我上一篇讲TailwindCSS的文章中我提到一个观点 —— 随着AI生成代码的普及，类似TailwindCSS这样的「原子化CSS」会越来越普及。...而是直接复制该组件的代码到项目目录下（当然，整个复制过程是通过cli工具完成的）。...这么做相比于传统组件库，有两个显著优势： 组件逻辑想改就改，不用担心组件没暴露对应的props 毕竟，整个组件的源代码我们都直接复制下来了，改个逻辑还不简单？
这样的结果就是针对特定的团队会非常有用和便利，但是有的团队无法达成这样的设计规范约束。 我们可以很明显的发现这种变化规律，因为 tailwindcss 最开始并不支持这样的写法，但是现在支持了。...这肯定是很难做到的。它提供的只是基础能力，任何样式内容一旦变多，就必然会导致可读性的下降。这样的想法让许多道友无法 get 到 tailwindcss 的优点。...-- 使用时的写法也会非常简洁 --> 此时，比如我还想支持以 bg 开头的背景颜色，但是在 tailwindcss...中，支持的背景颜色太多了，我如果想要用同样的方式来处理肯定是不行的，那么怎么办呢？...例如这里，我定义一个字符串用于接收背景相关的属性，然后遍历 props 并识别出以 bg- 开头的属性。
经过这个项目的历练，现在，我已熟练度拉满，彻底拿捏了 tailwindcss。 魔功大成！ 这篇文章，就跟大家分享一下我在 tailwindcss 中已经使用到的高级用法。...我写的文章内容，源文件是 .md 格式，此时如果我想要在 .md 中使用 tailwindcss，那么就需要将其转换为 html 之后再适配 tailwindcss，我们就可以这样配置 const remark...这里的 theme 表示一个 get 方法，可以获取到 theme 配置项中对应属性的具体值。...首先，我们要在入口 css 中文件中，约定不同主题的 css 变量。...但是官方文档对于配置文件的讲解有一些缺漏，导致我也花了很长时间，查了不少资料才最终读懂，因此这篇文章我把缺漏的部分补上，有助于道友们更加方便理解它，并结合官方文档彻底拿捏 tailwindcss 的自定义配置
B 站获取视频信息,评论的功能（原本是打算做自动回复的），顺便巩固下 chrome 开发（快一年没碰脚本类相关技术了），顺便写套模板供自己后续编写 Chrome 插件做铺垫。...至于为什么不用，因为我需要在 content-scripts.js 中引入 element 组件，如果使用 babel-plugin-component 将无法按需导入组件以及样式（应该是只支持 vue...文件按需引入，总之就是折腾了我一个晚上的时间） 安装 tailwindcss 不过官方提供了如何使用 TailwindCSS，这里就演示一下 在 Vue 3 和 Vite 安装 Tailwind CSS...vue是运行时的模块，因为content是插入到目标页面，对组件的渲染需要运行时的vue， 而不是编译环境的vue （我也不知道我在说啥，反正大概意思就是这样） import Vue from 'vue...如果有涉及到爬取数据相关的，我肯定是首选使用 HTTP 协议，如果在搞不定我会选择使用 puppeteerjs，不过 Chrome 插件主要还是增强页面功能的，可以实现原本页面不具备的功能。
CSS-in-JS是一种「将css内嵌到js文件中的技术方案」，现在已经有很多种css-in-js库，支持「动态改变样式」等功能。... 肉眼可见的代码量少了很多，而且class不用再命令，既节省了想名字的时间，又直接将css以内联的形式直接写入，可谓是一步到位。...tailwindcss的文档我个人认为非常友好，代码和样式相互对照，而且还告知了自定义配置应该如何去做，几乎所有的样式都有。 ? 代码样式对照 ? 颜色对比 「按需配置打包」。...，除了还需要在官网查api外，我使用tailwindcss的体验一直良好。...虽然也有一些想要害死强迫症的地方。 例如，rem的问题。tailwindcss中的h4代表的是height: 1rem，也就是说h1代表的是0.25rem。
去除占用CPU较高且无用的特效。 8.底部采用波浪式背景图片，简单却又不失调皮（皮一下很开心）。 9.首页CMS布局基本采用自定义文章的形式展示，给你最大化的自由！...更新说明（2020年/01/23）： V、更新新春背景皮肤，修复商品页文字错版。 更新说明（2020年/01/19）： V、修复开启雪花特效后无法点击底部链接的BUG。...如果想要首页自带翻页功能，所显示的文章数量，需要在网站设置，页面管理“列表页显示文章的数量”设置（跟分类显示文章的数量是一致的），想显示几篇就填写对应的数字就行。 V、修复部分BUG。...--.修复文章页面评论无法关闭及上下篇出错的BUG。 --.修复评论之后无法显示评论内容的BUG。 --.新增侧栏作者介绍微信模块。（自定义Font图标） --.新增自定义背景图片。...； 然后是热门天数（文章推荐和热门天数是TAB切换展示的，直接拖拽（文章推荐/热门文章） 即可），比如想展示一个月的热门，那么就填写30（一年是365天，我知道这是废话，但还得写出来），就行了。
去除占用CPU较高且无用的特效。 8.底部采用波浪式背景图片，简单却又不失调皮（皮一下很开心）。 9.首页CMS布局基本采用自定义文章的形式展示，给你最大化的自由！...更新说明（2020年/01/23）： V、更新新春背景皮肤，修复商品页文字错版。 更新说明（2020年/01/19）： V、修复开启雪花特效后无法点击底部链接的BUG。...如果想要首页自带翻页功能，所显示的文章数量，需要在网站设置，页面管理“列表页显示文章的数量”设置（跟分类显示文章的数量是一致的），想显示几篇就填写对应的数字就行。 V、修复部分BUG。...外链中转页增加开关，不喜欢中转页的关闭就直接访问链接。） --、增加分类列表标题的变粗、变色功能（变色采用RGB代码，不懂的自己百度，或者直接填写英文颜色单词也可，比如：blue）。...； 然后是热门天数（文章推荐和热门天数是TAB切换展示的，直接拖拽（文章推荐/热门文章） 即可），比如想展示一个月的热门，那么就填写30（一年是365天，我知道这是废话，但还得写出来），就行了。
tailwindcss 那是真香！ 对 tailwindcss 早有耳闻，但在我以前的观念里，tailwindcss 那简直就是开历史倒车，所谓的原子化 css，不就是早年的 bootstrap 么？...直到后来，我深度使用了小半年的鸿蒙开发之后，我这刻板印象直接就变了。 道友们，谁懂啊，不用想怎么写 class 名有多爽？ 0、arkUI 风格 鸿蒙开发的语言风格设计，其实被许多的前端所不接受。...我得重新顺一遍思路 想起来了，要在 css 文件里加样式。这里加样式也有一个痛点。那就是调样式的时候。文件要来回切换.......这里我有一个很重要的思维转变就是接了别人的项目之后，我想的反正这个项目最后也不是我来维护，交给别人去做就行，于是 class 名很长一串，看着挺恶心我也觉得没什么了，但是写着写着发现，维护起来也没那么麻烦...我这里就简单介绍一下如何在 vite + react 的项目中引入 ✓后续我准备在我的小程序项目中引入 tailwindcss，如果考虑到要兼容 PC 端，兼容我之前的那一套响应式方案，那么复杂度就上来了
，太多功能是不支持的，想在father4.rc集成原子类要踩的坑实在太多，通过father4打包出来的产物和下图类似 这种打包形式目前已知的问题包括 在NextJs无法使用，因为Next是约定式导入样式文件...，仅允许在_app.tsx文件中导入样式 正常项目未配置less-loader无法使用，怎么会有组件库打包继续使用import "xxx.less"这种语法，这本身就是不对的 而通过father2.x配置后...来进行构建，我们需要手动将版本修改为更稳定的2.x，我这里是使用2.30.21 3.1.3 安装tailwindcss 值得注意的是，由于tailwindcss3依赖于postcss8，而umi目前为止还是在使用...outputPath，我们填写的是docs，原因就在上图的红圈处，github page目前看到提供的选项就是「root」和「docs」，所以我们需要打包到docs文件夹。...3.3.1 创建组织 创建组织是免费的，尽管创建就是了 3.3.2 配置token 写在根目录的.npmrc，记得不要跟着git仓库上传了 3.3.3 发布命令变化 如果想免费发布一个带有作用域的npm
进入到 next-interview 目录下安装 tailwindcss 相关 npm 包，并且初始化 tailwindcss 配置文件 yarn add --dev tailwindcss postcss...autoprefixer @tailwindcss/typography npx tailwindcss init -p 接下来将 pages 和 styles 文件夹重新移动到 src 目录下，这一步是我个人习惯...而默认是部署区域在美国华盛顿特区，而 uniCloud 的云函数则是部署在上海的，也就我一个请求在发出，在上海和美国盛顿特来了个往返。...我的这个网站也开源了，包含一些前端常用工具，还可以在线刷面试题。...前端工具箱 GitHub 代码 以上就是本文全部内容，希望这篇文章对大家有所帮助，也可以参考我往期的文章或者在评论区交流你的想法和心得，欢迎一起探索前端。
基础背景 我使用的 AI 工具是安装在自己 Slack 频道的 Claude App； 我对 Tailwind CSS 的实现原理一无所知，我只知道简单的使用方法。...经过直接提问发现无法得到我想要的答案，于是我开始尝试从实现原理层面进行引导，让 AI 帮忙生成解决方案，我尝试过如下提问： 如何创建类似 dark:* 的自定义形式 Tailwind CSS 如何自定义实现类似...我还是执着于让 AI 直接给我生成方案，所以我粗略看了一下之后又进行了如下提问： 如何为默认变体提供 alias 到 light 在 Tailwind CSS 中如何使用 variants 使得 light...） 其实这一步的所有提问基本都是在做无用功，因为我太执着于直接获取解决方案而忽略了解决问题的正确流程，我把 AI 想象的过于强大了。...然后我问了： Tailwind CSS 如何表达 .abc .bg-white Tailwind CSS 如何匹配父 class Tailwind CSS 如何实现父 class 选择器 这里我是想：在当前项目中所谓的主题模式是通过控制
默认的符号我们是无法做任何的样式处理，而且默认的符号在CSS属性里面只有几个选择可以使用，很多情况下都是无法满足我们的设计。...二、然后使用a:first-child，这个伪类会选择到第一个a标签，然后使用content属性加入»符号。 三、因为我们第一步在每个a标签的后面插入了/符号, 所以我们需要在最后一个a标签清除掉。...---- 公众号回复“前端教程源码”获取源码地址 6. 裁剪图像的动画 在有CSS3之前裁剪图片实现也是颇有难度的。...---- 公众号回复“前端教程源码”获取源码地址 总结 我希望这8个前端小技巧和特效对大家有帮助，或多或少有吸收一点新的前端知识。这篇文章提到的内容，其实很多都是值得深挖和学习的。...有一些例子我做的比较简单，但是其实是有无限的可能性。喜欢前端的童鞋们，让我们继续在前端领域中一起深挖，让我们的热爱无限的燃烧起来吧！ ---- 在最后我想给大家讲一下我对前端的热爱和态度。
至于抛错的具体原因和其他细节，不是本文讨论的重点， 感兴趣的可以阅读文章底部链接了解原因和相关细节。...Module Redirects (中转模块导出) 有时候为了避免上层模块导入太多的模块，我们可能使用底层模块作为中转，直接导出另一个模块的内容如下： export 只支持在最外层静态导出、只支持导出变量...具体细节可以参考V8文档的Module 部分， 链接在文章底部的延伸阅读。 下面我就总结下import的基本用法： 1....例如实际用到某个模块才去加载： es7的新用法： 总结 以上， 我总结了ES6 Module 的简单背景和 常见的 import , export 用法， 但这远远不是它的全部。...如果想了解更多细节， 可以阅读底部的延伸阅读部分。
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
实时音视频
即时通信 IM
对象存储
