type
status
date
slug
summary
tags
category
icon
password
Edited
Feb 28, 2023 03:28 AM
Created
Feb 28, 2023 03:07 AM
安装
Tailwincss安装
TailwindCSS可以通过npm或yarn进行安装。在命令行中输入以下命令：
或
安装完成后，在项目的CSS文件中使用
@import命令引入TailwindCSS即可开始使用。使用
配置文件
TailwindCSS的配置文件是一个JavaScript文件，其中包含了所有的样式配置。你可以使用以下命令生成默认的配置文件：
或者你可以手动创建一个名为
tailwind.config.js的文件，然后在其中定义你自己的配置。样式使用
在CSS文件中使用类名来调用TailwindCSS的样式。例如，使用
text-center类可以将文本居中对齐。你也可以使用TailwindCSS的实用工具来生成自定义样式。例如，使用以下代码可以生成一个宽度为50%的灰色背景的div:
NextJS & TailwindCSS
集成
要在NextJS项目中使用TailwindCSS，需要安装相应的插件。在命令行中输入以下命令：
然后，生成一个名为
postcss.config.js的文件和名为tailwincss.config.js的文件接下来，在
pages/_app.js文件中导入styles/globals.css文件：最后，在
styles/globals.css文件中导入TailwindCSS：现在，你可以在NextJS项目中使用TailwindCSS了！
用法
基本使用
在CSS文件中使用类名来调用TailwindCSS的样式。例如，使用
text-center类可以将文本居中对齐。你也可以使用TailwindCSS的实用工具来生成自定义样式。例如，使用以下代码可以生成一个宽度为50%的灰色背景的div:具体类名，可在官网文档搜索
注意使用类名属性时的空格，用
_ 代替使用Tailwincss外的类名
响应式
响应式文档：
暗黑模式
先启用
darkMode ，在tailwincss.config.js中使用
重写/覆盖Tailwind配置
使用
自定义类名
除了使用TailwindCSS提供的类名之外，你还可以自定义类名来实现特定的样式。在配置文件中，你可以使用
theme属性来定义自己的颜色、字体、间距等。然后，在CSS文件中使用@apply命令来调用这些自定义属性。例如，你可以将以下代码添加到你的配置文件中：然后，在CSS文件中使用以下代码来调用这个颜色：
这将创建一个具有自定义背景颜色、文本颜色、内边距和圆角边框的按钮。
或创建一个
component 配置 Animate
TailwindCSS提供了丰富的
animate类来实现动画效果。你可以在配置文件中自定义动画，例如：然后，在CSS文件中使用以下代码来调用这个动画：
这将创建一个旋转3秒的动画。
Skeleton动画
- 配置动画
- 配置类名
- 使用
TailwinCSS的UI库推荐
daisyui
tailwind-elements
heroicons官方图标库
参考链接：
- 作者:JinSo
- 链接:https://jinso365.top/article/tailwindcss-intro
- 声明:本文采用 CC BY-NC-SA 4.0 许可协议，转载请注明出处。