- 综合排序
- 最热优先
- 最新优先
- 来自专栏快乐阿超
TailwindCss
分享一个CSS框架，内置了很多css样式： https://www.tailwindcss.cn/ 使用方式： https://www.tailwindcss.cn/docs/installation 注意其不支持IE浏览器 仓库地址：https://github.com/tailwindlabs/tailwindcss 甚至你可以直接在Playground中进行尝试： https://play.tailwindcss.com
42210编辑于 2022-08-21 - 来自专栏前端专享
TailwindCSS 资源推荐
前言 TailwindCSS 发布了 3.0， 功能也越来越好用，那么是否有与之相关的组件库呢 ？ 每个项目都有 awesome ，TailwindCSS 也有 awesome-tailwindcss, 你可以在这里找到插件、工具、 组件资源库、以及脚手架和学习资源。 Tailwindcss-forms 表单插件——增加了表单的默认样式，使修改表单样式变得简单。
2.1K20编辑于 2022-01-20 - 来自专栏coding个人笔记
tailwindcss 与 daisyUI
tailwindcss 是一款原子化的 css 工具库（框架）,可以无需书写 css 就可以快速构建网页。 tailwindcss 自由度够高，又提供复用封装，在我看来是完美的。 如果使用了 UI 库，又使用 tailwindcss 的基础样式，基础样式由组件提供，一些特殊一点的由 tailwindcss 提供。或者说，大神们使用的场景，不是我理解的场景？ 我自己觉得，当用了tailwindcss的时候，没必要因为用了，就不自定义自己的class，我们完全可以用tailwindcss进行一些便利的操作，然后配合自定义class，使得确实是一个标签太多的class 不需要像那些说的，用了tailwindcss就摆脱自定义class。 往期有文章《vite 新建 vue3 项目及安装插件笔记》有说了怎么安装 tailwindcss 和使用。
86120编辑于 2023-11-09 - 来自专栏一名前端开发
tailwindcss书写前端样式
公司开发了自己的组件库，组件的样式基于tailwindcss进行开发，所以近期项目重构时，技术组长要求使用tailwindcss，说实话一开始我是排斥的，心想着tailwindcss最后不也是解析成css ，但是组长要求了，我就照做,于是开始马不停蹄的学习起来tailwindcss了。 现将tailwindcss的总结整理如下： Tailwind CSS 有什么优点？ 为什么要使用tailwindcss，人家肯定是有优点。我们才使用的嘛。优点如下： 可定制化程度极高。 说了这么多tailwindcss的好处，接下来谈谈tailwindcss如何使用吧 tailwindcss的安装 npm install -D tailwindcss 创建tailwind.config.js modules: ['@nuxtjs/tailwindcss'], 开始使用 经过以上的配置，我们就可以丝滑的使用tailwindcss啦。
74320编辑于 2023-11-11 - 来自专栏大宇笔记
Unknown at rule @tailwindcss(unknownAtRules)
Unknown at rule @tailwindcss(unknownAtRules) 截图如下： 解决 ---- 原因是css 不知道这条规则提示，如果没有提示警告。
2K20编辑于 2022-09-07 - 来自专栏小鑫同学编程历险记
上手体验TailwindCSS
，有什么优势~ 快速开始： 创建 vite + vue-ts 项目： yarn create vite 安装 Tailwind CSS 依赖： npm install -D tailwindcss@latest postcss@latest autoprefixer@latest 生成 tailwind 和 postcss 配置文件： npx tailwindcss init -p tailwindcss 3 .x 版本的配置文件： /** @type {import('tailwindcss').Config} */ module.exports = { content: [ ". /base"; @import "tailwindcss/components"; @import "tailwindcss/utilities"; 全局样式文件在main.ts中导入： import 确实会有一些别扭，但是当我们在开发一些无法使用 UI 库的项目是就不得不面临编写大量 css 文件，还得考虑响应式布局，黑暗模式等等，但是这些对于 TailwindCSS 来说将是简单的，TailwindCSS
2.9K20编辑于 2022-12-26 - 来自专栏前端F2E
vite入如何引入Tailwindcss
简介 tailwindcss[1]是一个CSS框架。 npm install -D tailwindcss@latest postcss@latest autoprefixer@latest npx tailwindcss init -p 这里我们安装最新版本 "tailwindcss/components"; @import "tailwindcss/utilities"; 最后，我们在入口main.js中引入css： // tailwindcss import '/@/style/index.css'; 至此，我们就成功的引入了tailwindcss。 : https://tailwindcss.com/
2.6K20编辑于 2022-08-19 - 来自专栏农历七月廿一
tailwindcss真的好用吗？
写在前面 今天写一篇关于tailwindcss 的文章，其实这个css技术已经出现很久了，在一些大型项目很多人也已经在用了，虽然不是说必须要会吧，但是没听说过肯定是不行的，他的操作逻辑应该是和unocss 差不多，但是今天我们不写unocss，因为我也没咋看，没有具体的demo给到你们，今天我们就简单的写一个demo看一下tailwindcss的实现优势到底是什么，今天就实现一个非常简单的登录页面，大概效果如下 ：下面我们分别使用三种方式实现，原生css，预编译器scss，和 tailwindcss 最后我会说一下我对tailwindcss的一些看法 使用原生实现 <! tailwindcss其实改变了我们写css的习惯，本质就已经改变了，他提供了大量的简写形式给到我们，想快速的掌握这门css的技术，需要我们自己的css基本功，但是网上我也看了很多对tailwindcss tailwindcss推荐指数 ※※※ 三颗星
1.6K10编辑于 2024-01-12 - 来自专栏不知非攻
tailwindcss 高级思维模型
我们可以很明显的发现这种变化规律，因为 tailwindcss 最开始并不支持这样的写法，但是现在支持了。 这样的想法让许多道友无法 get 到 tailwindcss 的优点。 ✓好消息是下一个大版本 tailwindcss 4 简化了自定义 class 的配置，它更接近于直接在 css 文件中写样式，而不是在一个工程化的配置文件中写插件 因此，我们需要把 tailwindcss 得益于鸿蒙开发在布局上的启发，我基于 tailwindcss 封装了一套比较完整的容器组件。 ✓关于这个观点，你可以通过这篇文章了解我的想法和感受 tailwindcss 在基础能力上，比较欠缺的是语义化的表现能力。
47310编辑于 2024-07-02 - 安装 安装依赖 // vue vite npm install tailwindcss @latest postcss@latest autoprefixer@latest 生成配置文件 npx tailwindcss init 引入样式文件 // 模式1: 通过css文件按需引入 // /index.css' // 模式2: CND // index.html <link href="https://unpkg.com/<em>tailwindcss</em>@^2/dist/tailwind.min.css " rel="stylesheet"> // 模式3: 全引入 import "tailwindcss/tailwind.css" 功能 个人总结 tailwind css 功能主要包括三部分： 预设样式类 16px', '4': '24px', '5': '32px', '6': '48px', } }, 插件 const plugin = require('tailwindcss来自专栏方球
tailwindcss 从0到1
500 rounded-full'> $28.00 </button>
一文搞懂css、scss、tailwindcss区别
Scss、Tailwindcss区别 「SCSS（Sassy CSS）:」 语法接近 CSS： SCSS 使用类似于标准 CSS 的语法，使用大括号和分号，这使得它更易学习和迁移现有的 CSS 代码。
tailwindcss：弟弟们都往后稍稍
tailwindcss 最近使用tailwindcss，感觉上手体验很不错，虽然刚开始需要一直查文档，但我仍然觉得未来可期。 tailwindcss有很多的优点，工具类优先，响应式设计，组件友好，高度自定义等。 tailwindcss虽然需要前期频繁查文档，记住各种样式也是费时费力，但我依然觉得未来可期。 「文档友好」。 在生产环境，tailwindcss会自动删除所有未使用的css，尽可能的使css代码更小。 ? css代码压缩 「媒体查询」。 tailwindcss配置文件tailwind.config.js可以添加自定义的配置项。
Vue3引入tailwindcss
引入tailwindcss中文文档tailwind.docs.73zls.com/docs/installation安装 Tailwind 以及其它依赖项npm install tailwindcss@ latest postcss@latest autoprefixer@latest创建配置文件生成tailwind.config.js 和 postcss.config.js 文件npx tailwindcss
高颜值 tailwindcss 后台模板分享
这个免费的 tailwindCSS 模板带有预构建的示例，因此开发过程是无缝的，从原型页面切换到真实网站非常容易完成。 它的每个元素都有颜色、样式、悬停、焦点的多种状态，您都可以轻松访问和使用。 这个免费的 tailwindCSS 模板带有预构建的示例，因此开发过程是无缝的，从原型页面切换到真实网站非常容易完成。 如果你喜欢明亮清新的颜色，你会喜欢这个免费的 tailwindCSS 模板！它具有大量的组件，可以帮助您创建令人惊叹的网站。
Vue2 + tailwindcss 初始化
安装 tailwindcss 打开项目，安装 tailwindcss： cd vue2-tailwind # 安装 tailwindcss 低版本及相关插件 npm install tailwindcss @npm:@tailwindcss/postcss7-compat @tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9 然后创建配置文件： # 创建 postcss.config.js, tailwind.config.js npx tailwindcss init -p module.exports = { plugins: { tailwindcss: {}, autoprefixer: {}, } } module.exports = { purge: [ ". import "tailwindcss/tailwind.css" 启动项目 启动项目，修改模板中的 class 进行测试。
深度解析 tailwindcss 设计源规则
这段时间陆陆续续收到了很多朋友对于如何更进一步使用 tailwindcss 的提问，发现大家在学习和使用 tailwindcss 的过程中，并没有掌握真正的核心的要点。 例如，如果公司有自己的设计规范，我应该如何调整 tailwindcss 去自定义我的设计方案？ 这篇文章，我就从 tailwindcss 源规则的角度，为大家重新分享一些如何去做自定义的设置。 读懂基本规则 虽然 tailwindcss 的源规则比较简单，但是很显然，很多人并没有读懂它。 所以有的人会觉得 tailwindcss 用到真实项目中会非常痛苦，这个换算成本也太高了。 理解 tailwindcss 设计语言，是彻底成为资深 tailwindcss 高手的关键。这能够让你与团队的设计师更加紧密的合作。
用tailwindcss适配暗黑模式竟如此简单
本文就以 引发作者探索暗黑模式的背景 -> 暗黑模式起源以及重要性 -> tailwindcss + vue3 实践暗黑模式的思路来进行讲解。 (其他框架也是类似，只需要配置对应的 loader) 我们就直接通过 tailwindcss 官网提供的 vue3 + vite 的命令来新建项目（https://tailwindcss.com/docs /index.css' createApp(App).mount('#app') 至此我们的 vite + vue3 + tailwindcss 的工程已经初始化好了，接下来就是需要配置 tailwindcss const colors = require('tailwindcss/colors') const plugin = require('tailwindcss/plugin') const selectorParser 感想 以上我们通过了 探索暗黑模式的背景 -> 暗黑模式起源以及重要性 -> tailwindcss + vue3 实践暗黑模式的思路向大家讲解了如何用 tailwindcss 适配 暗黑模式，最初的起源只是因为想找到一个文档站点
高效地将 TailwindCSS 与 Nuxt 结合使用
在这篇文章中，我们将了解如何在 TailwindCSS 的官方 Nuxt 模块的帮助下有效地将 TailwindCSS 与 Nuxt 应用程序结合使用。 使用 Nuxt 设置 TailwindCSS 要开始将 TailwindCSS 与 Nuxt 一起使用，您可以按照TailwindCSS 网站上的说明安装并配置 TailwindCSS 作为依赖项。 接下来，我们需要将内置的 TailwindCSS 样式加载到我们的应用程序中。 加载 TailwindCSS 样式 默认情况下，Nuxt TailwindCSS 模块将从. 要开始使用tailwindcss-icons，我们需要将其安装为依赖项： yarn add -D @egoist/tailwindcss-icons 该包公开了一个方法，用于iconsPlugin为 TailwindCSS 我们还学习了如何注入图标以用作 TailwindCSS 类，tailwindcss-icons以及如何使用外部工具快速轻松地为 TailwindCSS 生成自定义调色板。
使用 NextJS 和 TailwindCSS 重构我的博客
Mysql 服务器是阿里云 ESC 最低配 优点： 感觉没什么优点； 缺点： 浏览器渲染，搜索引擎无法收录 ESO 优化难，Antd 组件使用方便，但前台页面定制需要覆盖样式； 第三版：NextJS + TailwindCSS + Postgresql 优点： 服务端渲染（SSR) + 静态生成， 访问速度极快，全新 UI 支持换肤； TailwindCSS 在国外如火如荼，但是在国内却很少看到在生产上应用，对我来说， TailwindCSS
如何使用tailwindcss自定义hugo主题
如何使用tailwindcss自定义hugo主题 如何使用tailwindcss自定义hugo主题?对于某些主题，可能作者开发时候，它不具备自定义指定css的功能，但这并不妨碍我们自己添加这个功能。 的主题，其实完成前两步就好了，但是对于使用了tailwindcss的主题，由于它还有一个编译的过程，根据你指定的content内容的匹配目录，如./**/*. 这里要对于这个tailwindcss多说几句了。如果你写过前端界面的话，一路发展过来的路径，确实得让人们感觉到技术的进步。 而我觉得tailwindcss的出现就给解决媒体查询这种问题一个更艺术一点的解决方案了。 当然tailwindcss的使用过程还是有很多技巧的，我自己也在摸索中，有什么新的想法再写文章分享。今天这篇有关如何使用tailwindcss自定义hugo主题的文章至此分享结束，感谢阅读。
