In this lesson, we learn how to generate custom utility classes in tailwind. We add new properties to our JavaScript config object to generate new hel
转载
2018-04-10 18:10:00
118阅读
2评论
一、核心概念与设计哲学
原子化CSS框架
Tailwind CSS 采用“功能类优先”（Utility-First）理念，提供细粒度的工具类（如 p-4、text-center），开发者通过组合这些原子类实现定制化样式，而非依赖预置组件（如Bootstrap）。
原子类示例：按钮可通过组合 bg-blue-500 hover:bg-blue-700 text-white font-bold py-
Tailwind CSS是一个与Bootstrap、Element等不同的CSS框架，它没有类似btn这样的组件样式，而是基于Utility构建的一套CSS。Tailwind CSS的理念是提供一套完整的，最小单位的工具类CSS，再由设计师将它们组合起来。如果页面有很多Button，需要统一样式，难道需要在每个Button的class中重复一大串样式名吗？为了复用一组样式，Tailwind提供了一
原创
2024-07-05 15:43:06
136阅读
上一篇文章 Angular 中 SASS 样式的使用中，我们已经介绍了 sass 样式的介绍。本文，我们来介绍另一个编写样式的神器 -- Tailwind。Tailwind宣称无需离开...
原创
2022-08-27 01:23:03
167阅读
When creating UIs with utility classes, a lot of repetition can occur within the HTML markup. In this lesson, we see how this concern can be addressed
转载
2018-04-12 19:08:00
94阅读
2评论
初始化 Tailwind CSS 通过 npm 安装 Tailwind 安装 Tailwind 以及其它依赖项: npm install -D tailwindcss@npm:@tailwindcss/postcss7-compat @tailwindcss/postcss7-compat post ...
转载
2021-10-27 15:31:00
223阅读
2评论
You are able to extend the custom css with hover, focus, group-hover, responsive variants class in tailwind. https://tailwindcss.com/docs/functions-an
转载
2018-04-11 21:39:00
135阅读
2评论
In this lesson, we take a look at tailwind's mobile-first CSS architecture and learn how to apply styles to specific media queries only. We also disco
转载
2018-04-10 18:16:00
98阅读
2评论
在 React 项目中使用 Tailwind CSS 是一个很流行的选择，因为它提供了一种实用工具优先的方法来编写 CSS，使得你可以直接在类名中应用样式。这种方法使得样式编写更加简洁和直观。Tailwind CSS 是一个功能强大的 CSS 框架，它通过实用工具优先的方法使得样式编写更加简洁和模块化。与传统的基于类的 CSS 框架不同，Tailwind 提供了一组低级实用工
原创
2024-10-14 09:45:26
39阅读
In this lesson, we learn how to target specific states of elements and apply styles only when those states are triggered.
转载
2018-04-10 18:20:00
120阅读
2评论
Tailwind CSS in Action
CSS framework
转载
2020-11-10 22:03:00
160阅读
2评论
在tailwind.config.js 文件的 theme 部分，您可以定义您项目的调色板、类型比例、字体、断点、边框半径值等。// tailwind.config.js
const colors = require('tailwindcss/colors')
module.exports = {
theme: {
screens: {
sm: '480px',
md: '768px',
lg:
主要参考资料: 《Matlab C# Book》，我看的是第一版的电子书，网上可以搜到。 说实话，我觉得C#与Matlab混合编程相比VC与Matlab混合编程没有啥优势，基本上还是通过P/V Invoke操作Matlab mcc编译器生成的C语言版本的DLL。此外，
In this lesson, we learn how to control what utility classes are generated for each utility class module. We look at how we can “opt-in” for responsiv
转载
2018-04-11 21:18:00
77阅读
2评论
[!NOTE] Tailwind CSS 是一个别具一格的 CSS 界面框架。用官网的一句话来介绍：Rapidly build modern websites without ever leaving your HTML。也就是只要引入 Tailwind CSS，在不需要使用任何自定义 CSS 文件 ...
In this lesson, we learn how to generate CSS utility classes from Tailwind's JavaScript config file. We set up a new project from scratch, install tai
转载
2018-04-10 17:44:00
120阅读
2评论
Webpack 安装参考 Installation Using PostCSS as your preprocessor Nesting 参考 Nesting 是让 css 能写出嵌套式的方法 (类似 Sass 的语法, 如果用了 Sass 自然就不需要这个了) Nesting PostCSS 就有 ...
转载
2021-10-10 13:22:00
393阅读
2评论
❝积土而为山，积水而为海。——《荀子·儒效》❞大家好，我是「柒八九」。前言在回望过去，展望未来- 2024 React 生态一览表中讲到CSS时，我们提到过Tailwind CSS，并且也说会有相关的文章。在文章中介绍到，Tailwind CSS的受欢迎程度还是很高的。。不能说是遥遥领先，但是也是和另外的css解决方案 - style components并驾齐驱。这不，乘着上篇文章还没凉透的，我
原创
精选
2023-11-14 20:19:36
961阅读
为什么使用 Tailwind.csshtml 与 css 融为一体 强大的原子class 生产环境按需按需构建 完整的响应式布局 支持hover以及focus状态 在前端框架实现充分复用 使用@apply融入业务css 支持深色模式 通过配置易于扩展、调整和改变 支持 CSS grid 以及更多的现代选择器，例如 :focus-visible VSCode 集成代码片段提示 付费或者免费的组件库代码片段 组合 figma 使用中文站Tailwind CSS - 无需离开您的
原创
2021-12-31 14:22:59
313阅读
为什么使用 Tailwind.csshtml 与 css 融为一体 强大的原子class 生产环境按需按需构建 完整的响应式布局 支持hover以及focus状态 在前端框架实现充分复用 使用@apply融入业务css 支持深色模式 通过配置易于扩展、调整和改变 支持 CSS grid 以及更多的现代选择器，例如 :focus-visible VSCode 集成代码片段提示 付费或者免费的组件库代码片段 组合 figma 使用中文站Tailwind CSS - 无需离开您的
原创
2022-01-07 11:30:21
231阅读
