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评论
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评论
一、核心概念与设计哲学
原子化CSS框架
Tailwind CSS 采用“功能类优先”（Utility-First）理念，提供细粒度的工具类（如 p-4、text-center），开发者通过组合这些原子类实现定制化样式，而非依赖预置组件（如Bootstrap）。
原子类示例：按钮可通过组合 bg-blue-500 hover:bg-blue-700 text-white font-bold py-
初始化 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评论
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阅读
[!NOTE] Tailwind CSS 是一个别具一格的 CSS 界面框架。用官网的一句话来介绍：Rapidly build modern websites without ever leaving your HTML。也就是只要引入 Tailwind CSS，在不需要使用任何自定义 CSS 文件 ...
为什么使用 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阅读
