腾讯云开发者社区-腾讯云

开发者社区

文档建议反馈控制台

文章/答案/技术大牛

发布

综合排序丨最热优先丨最新优先

分享一个CSS框架，内置了很多css样式： https://www.tailwindcss.cn/ 使用方式： https://www.tailwindcss.cn/docs/installation 注意其不支持IE浏览器仓库地址：https://github.com/tailwindlabs/tailwindcss 甚至你可以直接在Playground中进行尝试： https://play.tailwindcss.com

2022-08-21

4480

标签:

TailwindCSS 资源推荐

前言 TailwindCSS 发布了 3.0，功能也越来越好用，那么是否有与之相关的组件库呢？每个项目都有 awesome ，TailwindCSS 也有 awesome-tailwindcss, 你可以在这里找到插件、工具、组件资源库、以及脚手架和学习资源。 Tailwindcss-forms 表单插件——增加了表单的默认样式，使修改表单样式变得简单。

狂奔滴小马

2022-01-20

2.2K0

标签:

腾讯云开发者社区

tailwindcss 与 daisyUI

tailwindcss 是一款原子化的 css 工具库（框架）,可以无需书写 css 就可以快速构建网页。 tailwindcss 自由度够高，又提供复用封装，在我看来是完美的。如果使用了 UI 库，又使用 tailwindcss 的基础样式，基础样式由组件提供，一些特殊一点的由 tailwindcss 提供。或者说，大神们使用的场景，不是我理解的场景？我自己觉得，当用了tailwindcss的时候，没必要因为用了，就不自定义自己的class，我们完全可以用tailwindcss进行一些便利的操作，然后配合自定义class，使得确实是一个标签太多的class 不需要像那些说的，用了tailwindcss就摆脱自定义class。往期有文章《vite 新建 vue3 项目及安装插件笔记》有说了怎么安装 tailwindcss 和使用。

2023-11-09

9830

标签:

Unknown at rule @tailwindcss(unknownAtRules)

Unknown at rule @tailwindcss(unknownAtRules) 截图如下：解决 ---- 原因是css 不知道这条规则提示，如果没有提示警告。

星宇大前端

2022-09-07

2.1K0

标签:

tailwindcss书写前端样式

公司开发了自己的组件库，组件的样式基于tailwindcss进行开发，所以近期项目重构时，技术组长要求使用tailwindcss，说实话一开始我是排斥的，心想着tailwindcss最后不也是解析成css ，但是组长要求了，我就照做,于是开始马不停蹄的学习起来tailwindcss了。现将tailwindcss的总结整理如下： Tailwind CSS 有什么优点？为什么要使用tailwindcss，人家肯定是有优点。我们才使用的嘛。优点如下：可定制化程度极高。说了这么多tailwindcss的好处，接下来谈谈tailwindcss如何使用吧 tailwindcss的安装 npm install -D tailwindcss 创建tailwind.config.js modules: ['@nuxtjs/tailwindcss'], 开始使用经过以上的配置，我们就可以丝滑的使用tailwindcss啦。

2023-11-11

8580

标签:

上手体验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

前端小鑫同学

2022-12-26

3.1K0

标签:

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/

2022-08-19

2.7K0

标签:

tailwindcss 高级思维模型

我们可以很明显的发现这种变化规律，因为 tailwindcss 最开始并不支持这样的写法，但是现在支持了。这样的想法让许多道友无法 get 到 tailwindcss 的优点。 ✓好消息是下一个大版本 tailwindcss 4 简化了自定义 class 的配置，它更接近于直接在 css 文件中写样式，而不是在一个工程化的配置文件中写插件因此，我们需要把 tailwindcss 得益于鸿蒙开发在布局上的启发，我基于 tailwindcss 封装了一套比较完整的容器组件。 ✓关于这个观点，你可以通过这篇文章了解我的想法和感受 tailwindcss 在基础能力上，比较欠缺的是语义化的表现能力。

2024-07-02

5970

标签:

tailwindcss真的好用吗？

写在前面今天写一篇关于tailwindcss 的文章，其实这个css技术已经出现很久了，在一些大型项目很多人也已经在用了，虽然不是说必须要会吧，但是没听说过肯定是不行的，他的操作逻辑应该是和unocss 差不多，但是今天我们不写unocss，因为我也没咋看，没有具体的demo给到你们，今天我们就简单的写一个demo看一下tailwindcss的实现优势到底是什么，今天就实现一个非常简单的登录页面，大概效果如下：下面我们分别使用三种方式实现，原生css，预编译器scss，和 tailwindcss 最后我会说一下我对tailwindcss的一些看法使用原生实现 <! tailwindcss其实改变了我们写css的习惯，本质就已经改变了，他提供了大量的简写形式给到我们，想快速的掌握这门css的技术，需要我们自己的css基本功，但是网上我也看了很多对tailwindcss tailwindcss推荐指数 ※※※ 三颗星

何处锦绣不灰堆

2024-01-12

2.1K0

标签:

tailwindcss 从0到1

500 rounded-full'> $28.00 </button> </div> </div> </div> 安装安装依赖 // 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/tailwindcss@^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

2021-12-08

2.1K0

标签: