本章将讨论如何配置 tailwind,以及几个 tailwind 官方插件。
项目配置文件和默认配置文件
当我们安装好 tailwind 时,项目中会有一个 tailwind.config.js
(通过 npx tailwindcss init -p
命令生成),它就是项目配置文件,通过它可以对 tailwind 进行配置。一个在 nextjs 项目中的典型的的 tailwind.config.js
长成这样:
/** @type {import('tailwindcss').Config} */
module.exports = {
content: [
'./pages/**/*.{js,ts,jsx,tsx}',
'./components/**/*.{js,ts,jsx,tsx}',
],
theme: {
extend: {},
},
plugins: [],
};
-
extend
:扩展
-
plugins
:插件
为了避免出错,对照默认配置文件进行操作未免不是一个好办法。当然,由于我们的配置文件中有 /** @type {import('tailwindcss').Config} */
,像VSCODE这种编辑器,会有配置项的自动提示。
配置:覆盖还是扩展
- 如果你把配置项直接写在
theme
里,那就是覆盖了默认配置,默认配置里的同一类型的预定义值可能都会失效,而改用你的配置 - 如果你把配置项写在
theme.extend
里,那就是扩展,可以同时使用默认配置和你扩展的配置。
下面我们通过扩展一个名为 axum-rs
,值为#7b1f00
的颜色进行讲解。
在 tailwind.config.js
中,加入以下配置
/** @type {import('tailwindcss').Config} */
module.exports = {
content: [
'./pages/**/*.{js,ts,jsx,tsx}',
'./components/**/*.{js,ts,jsx,tsx}',
],
theme: {
extend: {
colors: {
'axum-rs': '#7b1f00',
},
},
},
plugins: [],
};
此时,无论是文本、背景、边框等等,都可以使用 axum-rs
这个颜色了:
export default function Home() {
return (
<div>
<div className="text-axum-rs">你好,Axum.rs</div>
<div className="bg-axum-rs text-gray-50">你好,Axum.rs</div>
<div className="border-4 border-axum-rs my-3 p-3">你好,Axum.rs</div>
</div>
);
}
由于我们使用的是扩展,而不是覆盖,所以不但能使用我们自己加的颜色,也能继续使用 tailwind 预置的颜色,比如上例的 text-gray-50
。
官方插件
@tailwindcss/typography
:预置了一些排版样式@tailwindcss/forms
:预置了一些表单样式