tailwind css

前言 前段时间，laravel更新8.0版本，系统内置的Jetstream应用支架使用的是Tailwind CSS，于是勾起了我对Tailwind CSS的兴趣。 后来项目中也是逐步使用，总体感觉超级爽。就像他的简介一样Utility-First效用优先的CSS框架。 相比bootstrap，semantic ui antd这些组件库，tailwind只是个css库，简单的说就是可以完成任何ui交互，而上面的组件库一般就是做个后台应用，所以使用tailwind的环境更广泛一些。 几个亮眼的地方 首先是响应式设计。 css的媒体查询写起来还是比较麻烦的，如下： @media only screen and (max-width: 760px) { .navbar { width:100%; } } **使用了Tailwind CSS就免去这些繁琐的东西。**默认情况下，Tailwind使用移动优先断点系统，类似于您在Bootstrap或Foundation中可能使用的系统。 这意味着未加前缀的实用程序（如uppercase）在所有屏幕尺寸上都有效，而带前缀的实用程序（如md:uppercase）仅在指定的断点及以上断点生效。 如下一段代码就可以实现不同尺寸显示不同样式，是不是比媒体查询写法方便很多呢！ <div class="bg-red-500 sm:bg-green-500 md

PyCharm 是一种Python IDE，其带有一整套可以帮助用户在使用Python语言开发时提高其效率的工具。此外，该IDE提供了一些高级功能，以用于Django框架下的专业Web开发，接下来将讲解Pycharm的一些入门技巧，界面等相关知识。 本周的EAP专门介绍了全平台功能，现在已经捆绑在PyCharm中：Code With Me，一个用于协作开发和配对编程的工具，以及Grazie，一个智能文本校对助手。关于本次更新中修复的全部问题列表，请参见发布说明。 我们邀请您加入我们的EAP，尝试我们即将推出的最新功能，测试它们是否能在您的环境中正常工作，并帮助我们为大家打造一个更好的PyCharm! 下载PYCHARM 2020.3 EAP 强调 Code With Me 现在，默认情况下，PyCharm EAP 2020.3包括“Code with Me”功能。如果您正在学习结对编程或在线教学Python，那么绝对是您会喜欢的工具。 作为主机，你可以定义你想授予访客用户的权限级别。你可以允许其他人编辑文件，访问终端，并在你的项目中运行代码。另外，你也可以限制他们的访问级别，只允许他们查看你在实时编码时发生的事情。 除了可以协同开发之外，Code With Me的一个显着功能是它在来宾端对代码洞察功能的支持，例如代码导航和自动完成。 Grazie Grazie 为您在

原文： Atomic CSS-in-JS 时间：2020/04/27 作者： Sébastien Lorber 译者： ziven27 翻译时间：2020/05/10 译者： 国内大家都去搞 JS 去了，可以看到我们有可以与 REACT 抗衡的 VUE。却显见有类似 CSS-in-js, OOCSS，BEM，Atomic CSS ... 的 CSS 解决方案出现？这是为什么呢？ 随着 Facebook 和 Twitter 最近的产品技术方案的迭代更新，我们看到了一个新的流行趋势: Atomic CSS-in-JS。 在这篇文章中，我们将看到什么是原子CSS，它是如何与像 TailwindCSS 这样的 functional / utility-first CSS 之类技术方案的关系，以及哪些基于 react 框架的大厂是如何使用它的。 因为我不是这方面的专家，所以不要指望深入了解它的优缺点。我只是希望你能从对它的了解中有所启发。 注意: Atomic CSS 与 Atomic Design 设计无关。 译者注：Atomic CSS 是 CSS 代码的一种设计模式，Atomic Design 是对于设计资源和设计组织方式的一种设计理念。 什么是 atomic CSS? 大家可能听说过各种 CSS 解决方案，例如BEM，OOCSS ... < button class =

如今，黑暗模式是Web，桌面和移动应用程序中经常需要使用的功能。 通过增加可定制的界面来提高开发者对UI库的使用体验是非常重要的，可以带动很多开发者使用特定的UI库。 以下是一些支持暗模式的已知UI库。 Material UI React JS的Material Design UI框架在GitHub上拥有超过57,000个星标，具有简单，面向开发人员和可扩展的主题功能。它基于著名的CSS-in-JS，使开发人员可以在与同一基本概念相关的三种不同样式API之间进行选择。 任何熟悉Material UI的开发人员都可以证明其主题和调色板管理功能是生态系统中最好的。 根据主题化文档，我们可以很容易地在基本material UI应用程序上添加暗色主题。 此外，当我们访问文档时，我们可以切换明/暗模式和切换调色板，以帮助可视化所有提供的素材组件与不同的主题。 Vuetify Vuetify在GitHub上拥有25k颗星，是Vue中非常流行的UI框架。 它非常有名，因为它充分利用了Vue API。在Vuetify上，主题系统构建得非常好。给你的web应用一个黑暗主题是非常容易的。 Vuetify支持Material Design规范的浅色和深色版本。 这种指定从根程序组件 v-app 开始，并得到大多数组件的支持。默认情况下，你的应用程序将使用浅色主题