tailwind

css原子化的框架Tailwindcss的使用教程(元素html和vue项目的安装与配置)

npminstall-Dtailwindcsspostcss-cliautoprefixer初始化两个文件npxtailwindcssinit-p根目录下新建src/style.css@tailwindbase;@tailwindcomponents;@tailwindutilities;tailwind
萧寂173·2023-12-28 22:56

【tailwind CSS ml 不生效】

tailwind官方文档中需要注意的一点是，margin或者padding的值最大就到96！！！！！！！！附上官方文档链接tailwind官方文档
Dosage de fleurs·2023-12-27 09:30

Tailwind CSS 原子化开发初体验

一、安装这里以React+Vite为例安装依赖，生成postcss.config.js和tailwind.config.js配置文件npmi
天問_·2023-12-26 15:26

nextjs + antd 与 UnoCSS 样式冲突

问题原因集成UnoCSS时，导入了推荐的重置样式@unocss/reset/tailwind.css文件，与antd组件库样式冲突，如下：//pages/_app.jsimport'@unocss/reset
天問_·2023-12-23 13:06

TailWind CSS 文档 添加工具类

添加工具类尽管tailwind提供了一系列很全面的开箱即用的工具类，但是难免还是会有那种添加自定义类的情况。
你当温柔又有力量·2023-12-20 01:40

Tailwind CSS

TailwindCSS简介，在这一课中，我们将初步了解下TailwindCSS。什么是TailwindCSS？TailwindCSS是一个CSS框架，它提供了一系列预定义的实用类，您可以使用这些实用类来快速构建网页。TailwindCSS的主要特点是，它可以让您只编写您需要的CSS，从而减少代码量。TailwindCSS的优势使用TailwindCSS有很多优势，包括：**减少代码量：**Tail
步子哥·2023-12-18 11:29

react+umi tailwindcss 集成方案

react+umitailwindcss集成方案Tailwind是一个原子类方式命名的CSS工具集。
李不一丶·2023-12-18 05:40

Tailwind CSS 入门

什么是TailwindCSS？TailwindCSS是一个CSS框架，它提供了大量的预定义实用类，可以用来快速构建HTML页面。TailwindCSS的优势包括：可扩展性：TailwindCSS的类库是可扩展的，可以根据自己的需要进行定制。性能：TailwindCSS的类库是经过精心设计的，可以提高页面的性能。可维护性：TailwindCSS的类库是模块化的，可以提高页面的可维护性。Tailwin
步子哥·2023-12-18 03:01

prettier自动排列 Tailwind 的类名顺序

npm安装npminstall-Dprettierprettier-plugin-tailwindcss配置prettier.config.js//prettier.config.jsmodule.exports={plugins:['prettier-plugin-tailwindcss']} 配置.prettierrc（必须prettier-plugin-tailwindcss最后加载。）//
zhaojjjjjj163·2023-12-15 19:19

Naive UI 搭配Tailwind CSS 出现按钮变白，样式冲突，不兼容的解决

TailwindCSS的预热样式默认会替换NaiveUI的样式导致出现冲突，主要有：按钮底色变成白色、按钮涟漪出现绿边、字体异常等，在最新的V3版本tailwindcss解决很简单，Preflight关闭即可：tailwind
奋斗的烧饵块·2023-12-15 18:15

TailwindCSS 多主题色配置

Loremipsum...启用深色模式tailwind.config.js文件darkMode选项默认是false，需要启用深色模式，则可以设置为med
乐闻x·2023-12-14 23:44

Nextui使用

https://nextui.org/docs/frameworks/nextjs自定义主题https://nextui.org/docs/customization/customize-theme//tailwind.config.jsconst
活着Viva·2023-12-14 22:54

React使用TailwindCSS

npminstall-Dtailwindcsspostcssautoprefixer下载完毕后执行如下命令npxtailwindcssinit-p可以发现项目中多了两个文件其中默认已经进行了配置，我们需要将tailwind.config.js
田本初·2023-12-04 01:20

【Tailwind】footer固定底部

代码：HeaderContentFooter重点：每个部分设置高度，例如：h-10除了头部、底部，其他部分设置：mb-auto,mb-0参考：Tailwindcss:fixed/stickyfooteronthebottom
亮子AI·2023-11-22 09:15

在你所有的项目中都加入 TailwindCSS 吧！

文章目录前言一、配置文件1.简单安装2.引用样式3.其余二、使用样式1.样式说明2.组合样式三、扩展样式前言使用Tailwind，您可以通过直接在HTML中应用预先存在的类来设置元素的样式这也是所谓的使用功能类构建自定义设计而无需编写
LauSET·2023-11-22 07:29

tailwind css--width，flex

flex是比较难理解的，宽高是用着比较方便的，宽度w-0w-pxw-0.5w-screenw-auto高度同理，h-0等文本位置也是比较方便的text-centertext-lefttext-righttext-justify自定义宽度整个页面宽度其他会用的样式min-w-0min-width:0px;min-w-fullmin-width:100%;min-w-minmin-width:min-
许墨の小蝴蝶·2023-11-22 07:57

Tailwind CSS功能类优先

TailwindCSS功能类优先传统情况下，当您需要在网页上设置样式时，都需要编写CSS。ChitChatYouhaveanewmessage!.chat-notification{display:flex;max-width:24rem;margin:0auto;padding:1.5rem;border-radius:0.5rem;background-color:#fff;box-shado
正宗咸豆花·2023-11-22 07:26

Tailwind CSS

用于快速构建自定义用户界面.UsefulLinks传奇：官方资源Website-官方TailwindCSS网站.Repository-官方TailwindCSS存储库.Discussions-与其他社区成员就Tailwind
jpruby·2023-11-22 07:26

Tailwind CSS浅析与实操

TailwindCSS一、TailwindCSS简介WhatisTailwindCSSTailwindCSS|TailwindCSS中文文档|TailwindCSS中文网官方解释：只需书写HTML代码，无需书写CSS，即可快速构建美观的网站。本质上是一个工具集，包含了大量类似flex、pt-4、text-center以及rotate-90等工具类，可以组合使用并直接在HTML代码上实现任何UI设计
会思想的苇草i·2023-11-22 07:51

深入Tailwind CSS中的文本样式

深入TailwindCSS中的文本样式样式文本是网页设计的一个基本组成部分，而TailwindCSS提供了范围广泛的实用类，使文本样式设计既高效又有效。在本本中，我们将探索文本样式的常见最佳实践,讨论潜在的陷阱，并推荐设计方法。我们还将介绍20个基本的TailwindCSS文本样式属性，并提供实用的代码片段来说明每个属性。文本样式的最佳做法:文字排版使用TailwindCSS的排版类是保持风格一致
dralexsanderl·2023-11-22 07:49

[Vue 代码模板] Vue3 中使用 Tailwind CSS + NutUI 实现侧边工具栏切换主题

文章归档：https://www.yuque.com/u27599042/coding_star/vzkgy6gvcnpl3u2y效果示例配置src目录别名@https://www.yuque.com/u27599042/coding_star/ogu2bhefy1fvahfv配置TailwindCSShttps://www.yuque.com/u27599042/coding_star/yqzi
萤火虫的小尾巴·2023-11-16 19:20

[Vue 配置] Vite + Vue3 项目配置 Tailwind CSS

文章归档：https://www.yuque.com/u27599042/coding_star/yqzi9olphko9ity1TailwindCSS官网：https://www.tailwindcss.cn/docs/installation/using-postcss安装pnpmi-Dtailwindcsspostcssautoprefixer生成配置文件npxtailwindcssinit
萤火虫的小尾巴·2023-11-16 11:29

原子化CSS-Tailwind CSS的简介和使用

一、什么是原子化CSS原子化CSS(AtomicCSS)是一种用于设计和构建现代Web应用程序的CSS框架。它提出了一种将CSS拆分为更小、更可维护的部分的方法，以便更好地组织和管理CSS代码。在原子化CSS中，CSS组件被拆分为更小的部分，这些部分可以独立地编辑、测试和重用。这些原子通常是单个像素或极其微小的变化，例如颜色、大小、位置等。这些原子可以组合成更复杂的组件，例如按钮、表单、图标等。原
至善为止·2023-11-09 01:50

原子化 CSS 真能减少体积么？

驳Tailwind不好论》个人觉得说的还是有一定道理的，就是该作者的语气态度可能稍微冲了点：不过他说的确实有道理，如果这种原子化工具真的如评论区里那帮人说的那么不堪的话，又怎么会达到百万级的周下载量？
手撕红黑树·2023-11-09 01:49

使用最新版vite搭一个react 18项目

搭建一个简单的react项目使用到的技术Vite@latest、React.js@18.2.0、React-router@6.14.1、Typescript@5.2.0、AntDesign@5.7.0、Tailwind.css
张大炮y·2023-11-08 04:40

vite安装Tailwind CSS

安装-TailwindCSS中文网(nodejs.cn)这是官网，平常我练习一般会用vite脚手架我们选择这个vite模块可选择React和Vue版本的，这里选择react的按照操作，没问题的话就要出问题了1、在npmrundev的时候我是出现了这么个问题，解决办法在项目里重新npminstallvite或者npminstall后npmrundev2、在浏览器输入localhost:5174后是出
每天吃饭的羊·2023-11-03 08:04

Tailwind CSS vs 现代CSS，Tailwind CSS 会像CSS-in-JS 一样亡？

下面是正文~~Tailwind是一个深受喜爱的CSS框架，它拥有许多受欢迎的功能，用于创建用户界面。在本文中，我
@大迁世界·2023-11-02 09:39

原子CSS引擎——unocss

当然，原子样式也有很多选择，最著名的就是Tailwind。但由于Tailwind会生成大量样式定义，会导致全量的CSS文件往往体积会多至数MB，从而有性能上有一些不足❝扩展：什么是原
傲娇的koala·2023-10-29 12:06

unocss配置

安装依赖npmi--saveunocss,@unocss/resetmian.ts中引入import'@unocss/reset/tailwind.css'//初始化cssimport'uno.css'
unoooooooo·2023-10-29 12:05

第三章 使用UnoCSS原子化CSS

第三章使用UnoCSS原子化CSSUnoCSS的GitHub地址UnoCSS的文档地址原子样式也有很多选择，最著名的就是Tailwind。Tailwind虽然好，但是性能上有一些不足。
天界程序员·2023-10-29 12:34

Tailwind CSS和UnoCSS区别

TailwindCSS和UnoCSS是两个流行的CSS框架，它们有一些共同点，但也有一些区别。1.哲学和设计理念：-TailwindCSS的设计理念是提供一组原子级别的CSS类，这些类可以直接应用于HTML元素，通过组合这些类可以快速构建界面。它鼓励开发者直接控制CSS类，而不是通过编写和维护大量特定样式的CSS规则。-UnoCSS则更注重于自动化样式生成和去除不需要的样式。它使用了静态分析和Pu
liweijie_90·2023-10-29 12:33

《通信软件开发与应用》课程结业报告

以下要求中任选A或B，要求如下：A.静态网站采用纯CSS或你喜欢的任何CSS框架如Bootstrap、MDB、Tailwind等构建一个主题自选且不少
想写好代码的小香菜·2023-10-26 14:37

tailwind css_使用Tailwind CSS重新创建Google.com

tailwindcssTailwindCSSisanawesometoolthatchangesthewaywewriteourHTMLandCSS.Tailwindisa"utility-firstCSSframework"thatIinitiallywasn'tsureabout.OurHTMLgetsprettybusywhenusingTailwind,butI'vefoundit'sno
culiu9261·2023-10-26 14:28

tailwind css_使用Tailwind CSS v1构建美丽的着陆页

tailwindcssCascadingStyleSheet(CSS)isusedforcreatingaestheticallygoodlookingwebsites.CSSarestylingrulesthatareappliedtoawebpagetomakeitlookbeautiful.Wheneverawebpageisbeingdisplayed,thebrowserrenderst
culiu9261·2023-10-26 14:28

tailwind css_如何使用Tailwind CSS构建独特，美观的网站

tailwindcssWhenthinkingaboutwhatCSSframeworktouseforanewproject,optionslikeBootstrapandFoundationreadilyjumptomind.They’retemptingtousebecauseoftheirready-to-use,pre-designedcomponents,whichdevelopers
culi3182·2023-10-26 14:57

【Tailwind CSS】当页面内容过少，怎样让footer保持在屏幕底部？

在Tailwind中，你可以使用flex来实现footer保持在屏幕或页面底部。
亮子AI·2023-10-26 14:54

使用SASS模仿TailwindCSS生成常用CSS样式

最近维护MPX小程序项目发现没有基础样式库，由于MPX版本比较老不兼容tailwind库，用惯了tailwind后，再去css文件里一行行敲样式觉得难受，并且开发效率也不高，于是就想自己写一套和tailwind
Wynter_Wang·2023-10-26 04:08

TailwindCSS使用并开启JIT（vue2）

npminstall-Dtailwindcss@npm:@tailwindcss/postcss7-compatpostcss@^7autoprefixer@^9init配置npxtailwindcssinit-p这样根目录多了两个文件tailwind.config.js
前端的艺术·2023-10-24 06:38

next 自定义_app 和 _document

目的：因为nextjs里面是直接没有index.js，有时候我们需要整个项目遵循一个layout或者是一个link(比如tailwind)，那么这个时候，_app和_document的真正的意义才会开始存在为什么自定义
Alec_650e·2023-10-21 22:26

vite+vue3.0 使用tailwindcss

TailwindCSS中文网npminstall-Dtailwindcssnpminstallpostcssnpminstallautoprefixernpxtailwindcssinit-p生成/src/tailwind.config.js
zhou13528482267·2023-10-19 13:59

TailWind CSS 文档 伪类变体

说明：此系列文章是个人对TailwindCSS官方文档的翻译，不是很严谨，请谅解。伪类变体用适合的伪类，可以定义元素hover、focus等情况的样式。SignUp支持的元素包括：hover,focus,active,disabled,visited,first-child,last-child,old-child,even-child,group-hover,group-focus,focus-
你当温柔又有力量·2023-10-17 03:14

weapp-tailwindcss for uni-app 样式条件编译语法插件

如何使用tailwind.config.js注册postcss插件注册uni-appvitevue3uni-appvue2配置完成配置项这是什么玩意?
ice breaker·2023-10-16 23:59

TailwindCss Functions & Directives

Directives@tailwind@layer@apply@config【一般放在最后面，@import导入其他css文件后】@tailwindbase;@tailwindcomponents;@tailwindutilities
Fy哥·2023-10-12 23:55

六个讨厌 Tailwind CSS 的理由

TailwindCSS是一个流行的实用主义优先的CSS框架，声称可以帮助你更快更容易地创建自定义设计。然而，有时候TailwindCSS并不那么令人满意。事实上，有很多原因可以解释为什么你应该避免使用它，而坚持使用纯CSS或其他框架。以下是六个可能会让你讨厌TailwindCSS的原因。1.它失去了HTML和CSS的语义2.它用大量的类污染了你的HTML3.它不是可伸缩和可重用的4.它产生巨大的C
冲浪中台·2023-10-10 18:13

【CSS】Tailwind CSS

其中tailwind.config.js的配置可以改为：module.exports={content:['./index.html','./src/**/*.
小谢sd·2023-10-09 14:17

unocss使用&问题记录

npmadd-Dunocss在入口文件导入unocss和重置样式//main.ts文件//引入unocss编译的样式import‘uno.css’//重置浏览器默认样式import‘@unocss/reset/tailwind.css
u014632228·2023-10-08 17:13

unocss+vite+vue3初使unocss

它可以让你用简短的类名来控制元素的样式原子样式也有很多选择，最著名的就是Tailwind二、noCss优点增加开发维护效率：少打很多字符，也解决了来回跳转style写CSS复用性强，缩小项目体积降低命名负担
xiaaaa.z·2023-10-08 17:11

使用 Tailwind CSS 自定义基础样式层

/*添加自定义tailwind基础层样式,一般用于覆盖一些tailwind中默认的基础样式*//*如果要引用tailwind自带的值或tailwind.config.js的theme中配置的值,可以通过
步子哥·2023-10-06 16:24

Tailwind 导致 antd 的 button icon svg 不居中的 bug

githubissues地址bug截图图中可以看到图标靠下了.(其他地方的icon其实都靠下,这里用button来举例)解决方案方案一在你的css中添加css覆盖掉tw默认的值@tailwindbase;@layerbase{svg{display:inline;vertical-align:baseline;}}@tailwindcomponents;@tailwindutilities;方案二
xxxxxue·2023-10-06 10:31

React 在 styled-components 中使用 TailwindCss

方法1(推荐):编译@apply编译Styled-Components中的@apply将tailwind编译为普通css支持tailwind和windiBabel:https://github.com/
xxxxxue·2023-10-06 10:01
上一页 1 2 3 4 5 下一页
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他