自定义Tailwind样式的多种方法

📅

loading..🐩🐩🐩🐩

开始之前 🔗

本文基于Next.js 15中使用的Tailwind 3.4.1编写。

2025年4月9日补充：迁移到Tailwind 4.x后，同样可以使用这些方式。虽然也有@theme属性，但我更喜欢这里介绍的、支持代码片段提示的方式。

这次介绍在使用tailwindcss时，如何添加自定义样式。

除了直接在CSS文件中添加样式，还可以通过tailwindcss的配置文件进行扩展。

另外，如果希望通过一个类名

一次应用多条CSS规则

，可以借助插件定义自定义CSS集合。

这在添加自定义

排版样式

或按钮样式时很有用。

从安装Tailwind时CSS文件默认声明的base、components、utilities开始（3.x版本）。

global.css

@tailwind base;
@tailwind components;
@tailwind utilities;

使用tailwind.config.js文件 🔗

👨‍💻

使用配置文件的优点是能够修改和扩展现有主题。

screens属性 🔗

以下示例修改已定义的sm、md、lg、xl尺寸属性。

tailwind.config.ts

module.exports = {
	theme: {
		screens: {
			sm: '640px',
			md: '768px',
			lg: '1024px',
			xl: '1280px',
		}
	}
}

page.tsx

...
<div class="bg-blue-500 sm:bg-red-500 md:bg-green-500 lg:bg-yellow-500 xl:bg-purple-500">
	Responsive Design
</div>
...

colors属性 🔗

以下示例修改并增加已定义的颜色。

tailwind.config.ts

module.exports = {
	theme: {
		colors: {
			custom-blue: '#0000ff',
			custom-red: '#ff0000',
			gray: {
				100: '#f7fafc',
			},
		}
	}
}

page.tsx

...
<div class="bg-custom-blue">
	Custom Blue
</div>
<div class="bg-custom-red">
	Custom Red
</div>
<div class="bg-gray-100">
	Custom Gray 100
</div>
...

extend属性 🔗

以下示例修改并扩展已有的多种属性。

字体配置将在后文详细介绍。

tailwind.config.ts

module.exports = {
	theme: {
		extend: {
			fontFamily: {
				custom: ['Noto Sans KR', 'sans-serif'],
			},
			fontSize: {
				'7xl': '5rem',
			},
			spacing: {
				'72': '18rem',
			},
			borderRadius: {
				DEFAULT: '0.25rem',
				xl: '1rem',
			},
		}
	}
}

page.tsx

...
<div class="font-custom text-7xl">
	Custom Font Size
</div>
<div class="p-72">
	Custom Spacing
</div>
<div class="rounded">
	Custom Default Border Radius
</div>
<div class="rounded-xl">
	Custom XL Border Radius
</div>
...

container属性 🔗

以下示例修改已定义的container属性。

tailwind.config.ts

module.exports = {
	theme: {
		container: {
			center: true,
			padding: '2rem',
		}
	}
}

page.tsx

...
<div class="container mx-auto">
	Container
</div>
...

spacing属性 🔗

以下示例修改并扩展已定义的间距和尺寸属性。

tailwind.config.ts

module.exports = {
	theme: {
		spacing: {
      px: '1px',
      0: '0',
      0.5: '0.125rem',
      1: '0.25rem',
      1.5: '0.375rem',
      2: '0.5rem',
      2.5: '0.625rem',
      3: '0.75rem',
      3.5: '0.875rem'
		}
	}
}

page.tsx

...
<div class="p-px">
	1px
</div>
<div class="p-0">
	0
</div>
<div class="p-0.5">
	0.5
</div>
...

通过插件定义CSS集合 🔗

可以使用插件指定一组自定义CSS。

tailwind.config.ts

import plugin from "tailwindcss/plugin";
 
module.exports = {
	plugins: [
		function ({ addComponents }) {
			addComponents({
				'.btn': {
					padding: '.5rem 1rem',
					borderRadius: '.25rem',
					fontWeight: '600',
				}
			})
		}
	]
}

page.tsx

...
<div class="btn bg-blue-500 text-white">
	Button
</div>
...

添加排版样式时，这种方式同样很有用。

tailwind.config.ts

import plugin from "tailwindcss/plugin";
 
module.exports = {
	plugins: [
		function ({ addComponents }) {
			addComponents({
        ".headline-0": {
          fontFamily: '"Pretendard"',
          fontSize: "48px",
          fontWeight: "500",
          lineHeight: "normal",
          letterSpacing: "-0.48px",
        },
			})
		}
	]
}

page.tsx

...
<div class="headline-0">
	Headline 0
</div>
...

使用global.css文件 🔗

从Tailwind默认配置文件开始。

global.css

@tailwind base;
@tailwind components;
@tailwind utilities;

添加自定义类样式 🔗

可以在global.css文件中添加自定义类样式。

它的优点是易于用CSS定义，但缺点是无法使用tailwindcss代码片段式的样式自动补全。

global.css

.btn {
	padding: .5rem 1rem;
	border-radius: .25rem;
	font-weight: 600;
}

page.tsx

...
<div class="btn bg-blue-500 text-white">
	Button
</div>
...

联合使用配置文件和global.css 🔗

配置文件和global.css可以配合使用。

global.css

@layer base {
  :root {
    --background: #f8f8f8;
    --foreground: #171717;
  }
}

tailwind.config.ts

module.exports = {
	darkMode: 'class',
	theme: {
		extend: {
			colors: {
				background: 'var(--background)',
				foreground: 'var(--foreground)',
			}
		}
	}
}

page.tsx

...
<div class="bg-background text-foreground">
	Background & Foreground
</div>
...

添加自定义字体 🔗

添加字体文件 🔗

下载字体文件，并放入public文件夹。

例如，Pretendard的下载链接：Pretendard↗。

public/
	fonts/
		Pretendard-Thin.ttf
		Pretendard-ExtraLight.ttf
		Pretendard-Light.ttf
		Pretendard-Regular.ttf
		Pretendard-Medium.ttf
		Pretendard-SemiBold.ttf
		Pretendard-Bold.ttf
		Pretendard-ExtraBold.ttf
		Pretendard-Black.ttf

添加CSS文件 🔗

/src/util/font.css

@font-face {
  font-family: "Pretendard";
  src: url("/fonts/Pretendard-Thin.ttf") format("truetype");
  font-weight: 100;
}
@font-face {
  font-family: "Pretendard";
  src: url("/fonts/Pretendard-ExtraLight.ttf") format("truetype");
  font-weight: 200;
}
@font-face {
  font-family: "Pretendard";
  src: url("/fonts/Pretendard-Light.ttf") format("truetype");
  font-weight: 300;
}
@font-face {
  font-family: "Pretendard";
  src: url("/fonts/Pretendard-Regular.ttf") format("truetype");
  font-weight: 400;
}
@font-face {
  font-family: "Pretendard";
  src: url("/fonts/Pretendard-Medium.ttf") format("truetype");
  font-weight: 500;
}
@font-face {
  font-family: "Pretendard";
  src: url("/fonts/Pretendard-SemiBold.ttf") format("truetype");
  font-weight: 600;
}
@font-face {
  font-family: "Pretendard";
  src: url("/fonts/Pretendard-Bold.ttf") format("truetype");
  font-weight: 700;
}
@font-face {
  font-family: "Pretendard";
  src: url("/fonts/Pretendard-ExtraBold.ttf") format("truetype");
  font-weight: 800;
}
@font-face {
  font-family: "Pretendard";
  src: url("/fonts/Pretendard-Black.ttf") format("truetype");
  font-weight: 900;
}

在配置文件中添加字体 🔗

tailwind.config.ts

module.exports = {
	theme: {
		extend: {
			fontFamily: {
				pretendard: ["Pretendard"],
			}
		}
	}
}

在布局文件中导入CSS 🔗

/src/app/layout.tsx

import '../util/font.css';
...

使用字体 🔗

/src/app/page.tsx

...
<div class="font-pretendard text-7xl">
	Pretendard Font
</div>
...

遇到的问题与解决方法 🔗

🙅

结论 🔗

本文介绍了通过tailwindcss配置文件添加自定义样式的方法。

也介绍了使用插件定义自定义CSS集合的方式。

最后，还说明了如何通过global.css文件添加自定义类样式。

进一步思考 🔗

除了十六进制颜色代码，还可以用哪些方式表示颜色？

使用rgb/rgba 🔗

global.css

@layer base {
	:root {
    --background: 255, 255, 255;
    --foreground: 240, 240, 240;
	}
}

tailwind.config.ts

module.exports = {
	theme: {
		extend: {
			colors: {
        background: "rgba(var(--background) , <alpha-value>)",
        foreground: "rgba(var(--foreground) , <alpha-value>)",
			}
		}
	}
}

使用hsl/hsla 🔗

global.css

@layer base {
	:root {
		--background: 0, 0%, 100%;
		--foreground: 0, 0%, 94%;
	}
}

tailwind.config.ts

module.exports = {
	theme: {
		extend: {
			colors: {
				background: "hsla(var(--background) , <alpha-value>)",
				foreground: "hsla(var(--foreground) , <alpha-value>)",
			}
		}
	}
}

参考资料 🔗

Tailwind CSS - adding custom styles↗

自定义Tailwind样式的多种方法 | PromleeBlog