TailwindCSS的基本使用

安装

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:

具体类名，可在官网文档搜索

Utility-First Fundamentals - Tailwind CSS

Building complex components from a constrained set of primitive utilities.

https://tailwindcss.com/docs/utility-first

Utility-First Fundamentals - Tailwind CSS

💡

注意使用类名属性时的空格，用 _ 代替

使用Tailwincss外的类名

响应式

响应式文档：

Customizing Screens - Tailwind CSS

Customizing the default breakpoints for your project.

https://tailwindcss.com/docs/screens

暗黑模式

先启用darkMode ，在tailwincss.config.js中

使用

重写/覆盖Tailwind配置

使用

自定义类名

除了使用TailwindCSS提供的类名之外，你还可以自定义类名来实现特定的样式。在配置文件中，你可以使用theme属性来定义自己的颜色、字体、间距等。然后，在CSS文件中使用@apply命令来调用这些自定义属性。例如，你可以将以下代码添加到你的配置文件中：

然后，在CSS文件中使用以下代码来调用这个颜色：

这将创建一个具有自定义背景颜色、文本颜色、内边距和圆角边框的按钮。

或创建一个 component

配置 Animate

TailwindCSS提供了丰富的animate类来实现动画效果。你可以在配置文件中自定义动画，例如：

然后，在CSS文件中使用以下代码来调用这个动画：

这将创建一个旋转3秒的动画。

Skeleton动画

配置动画

配置类名

使用

TailwinCSS的UI库推荐