// tailwind.config.js module.exports = { theme: { colors: { gray: colors.coolGray, blue: colors.lightBlue, red: colors.rose, pink: colors.fuchsia, }, fontFamily: { sans: ['Graphik', 'sans-serif'], serif: ['Merriweather', 'serif'], }, extend: { spacing: { '128': '32rem',...
// tailwind.config.jsmodule.exports = {variants:{// ...-fontFamily:['responsive'],+fontFamily:['responsive', 'hover', 'focus'],}} Disabling If you don't plan to use thefont familyutilities in your project, you can disable them entirely by setting thefontFamilypropertytofalsein thecore...
tailwind.config = { theme: { fontFamily: { sans: ["Inter", "sans-serif"], serif: ["Inter", "serif"], mono: ["Inter", "monospace"] } } } </script> </head> 字号:text-[size] <div class="text-xs">Text Extra Small</div> <div class="text-sm">Text Small</div> <div class...
javascript // tailwind.config.js module.exports = { theme: { extend: { colors: { 'nav-bg': '#34495e', 'nav-text': '#ecf0f1', 'nav-hover': '#2c3e50', }, typography: { 'nav': { 'h1': { 'fontFamily': 'sans-serif', 'fontWeight': '600', 'fontSize': '2xl', 'color...
如果希望为页面整体添加一些默认的样式,例如字体 font family、标题大小等,可以将这些自定义的样式代码添加到base容器中。 @tailwind base; @tailwind components; @tailwind utilities; @layer base { h1 { font-size: 1.5rem; } h2 { /* 可以在样式表中通过指令 @apply 使用基础类来设置样式 */ @apply ...
您也可以省略 extend 属性,完全替换默认 Font Family: // tailwind.config.js module.exports ={ theme:{ fontFamily:{ 'body':['Open Sans','sans-serif'], 'heading':['Montserrat','sans-serif'], }, }, } 响应式断点 Tailwind CSS提供了开箱即用的响应式设计系统,但您还可以对其进行进一步定制,以...
如果您希望应用新定义的 sans font-family (仍然没有覆盖)但使用 Tailwind 作为默认后备,请修改您的脚本,如下所示; // tailwind.config.js const { fontFamily } = require('tailwindcss/defaultTheme') module.exports = { content: [ './pages/**/*.{js,ts,jsx,tsx}', './components/**/*.{js,ts...
fontFamily: { sans: ['Inter', 'sans-serif'], }, }, }, 1. 2. 3. 4. 5. 6. 7. 8. 9. 10. plugins:用于扩展Tailwind的功能,可以添加自定义插件。 plugins: [ // 引入插件 ], 1. 2. 3. 通过这些配置,您可以根据项目需求定制Tailwind CSS,确保它与您的开发环境和设计规范无缝集成。
@apply p-8 rounded-xl font-semibold; } 1. 2. 3. 二、使用 Tailwind CSS 的理由 1、超小的文件尺寸 = 令人难以置信的性能 在开发模式下,Tailwind的输出尺寸非常大。这是设计使然:在此阶段生成每个可能的类,因此当你想要使用某些东西时,无需等待完成构建的过程。
「自定义配置」。tailwindcss配置文件tailwind.config.js可以添加自定义的配置项。 代码语言:javascript 复制 constcolors=require('tailwindcss/colors')module.exports={theme:{colors:{gray:colors.coolGray,blue:colors.lightBlue,red:colors.rose,pink:colors.fuchsia,},fontFamily:{sans:['Graphik','sans-serif']...