首页 前端CSS正文

Tailwind CSS - 配置

原创
admin 4个月前 (08-07) 阅读数 17 #CSS

Tailwind CSS - 配置

Tailwind CSS 配置允许通过 'tailwind.config.js' 文件轻松自定义框架，根据项目需求定义框架的各个方面，如主题、颜色、屏幕、插件等。

如何生成配置文件？

以下是生成 'tailwind.config.js' 文件的分步指南。

  • Tailwind CSS 安装： 首先必须完成 Tailwind CSS 的安装。运行以下命令生成默认配置文件： 
    npm install tailwindcss
  • 生成配置文件： 使用以下命令可以轻松生成 'tailwind.config.js' 文件。 
    npx tailwind css init
  • 生成的文件： 将生成以下文件。

自定义配置

'tailwind.config.js' 文件允许轻松自定义配置，并将工具类与项目的特定设计要求保持一致。我们可以轻松自定义主题、字体、颜色、屏幕、间距、插件等，如下所示。

  • 内容： 'tailwind.config.js' 文件的内容部分使您可以添加包含 Tailwind CSS 类的所有 HTML 模板、JS 组件和其他文件的路径。 
    /** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    './pages/**/*.{html,js}',
    './components/**/*.{html,js}',
  ],
  // ...
}
  • 主题： 'tailwind.config.js' 文件的主题部分使您可以通过配置颜色、字体族、断点等来自定义项目的视觉设计，如下所示。 
    /** @type {import('tailwindcss').Config} */
module.exports = {
  // ...
  theme: {
    colors: {
      'blue': '#1fb6ff',
      'purple': '#7e5bef',
      'pink': '#ff49db',
    },
    fontFamily: {
      sans: ['Graphik', 'sans-serif'],
      serif: ['Merriweather', 'serif'],
    },
    extend: {
      spacing: {
        '8xl': '96rem',
        '9xl': '128rem',
      },
    }
  }
}
  • 插件： 'tailwind.config.js' 文件的插件部分使您可以添加额外的工具类、组件、基础样式、自定义变体等，如下所示。 
    /** @type {import('tailwindcss').Config} */
module.exports = {
  // ...
  plugins: [
    require('@tailwindcss/forms'),
    require('@tailwindcss/aspect-ratio'),
    require('@tailwindcss/typography'),
    require('tailwindcss-children'),
  ],
}
  • 前缀： 'tailwind.config.js' 文件的前缀部分使您可以为所有工具类添加自定义前缀，帮助减少命名冲突，如下所示。 
    /** @type {import('tailwindcss').Config} */
module.exports = {
  prefix: 'tw-',
}

    现在每个类都将使用配置的前缀生成：

    .tw-text-left {
  text-align: left;
}
.tw-text-center {
  text-align: center;
}
.tw-text-right {
  text-align: right;
}
/* etc. */

    对于负值，请在您的前缀前添加破折号修饰符。例如，如果前缀是 tw-，-mt-8 将变为 -tw-mt-8。

    <div class="-tw-mt-8">
  <!-- -->
</div>

    注意： 前缀仅适用于 Tailwind 生成的类，不适用于您的自定义类。要为您的工具类添加前缀，只需将前缀添加到类定义中：

    @layer utilities {
  .tw-bg-brand-gradient { /* ... */ }
}
  • 重要： important 选项使您可以将 Tailwind 工具标记为 "!important"。当您需要在 CSS 中高特异性时，这很有帮助。要将工具设为 '!important'，请在配置中将 'important' 键设置为 'true'。 
    /** @type {import('tailwindcss').Config} */
module.exports = {
  important: true,
}

    现在所有的 Tailwind 工具类都将生成为 '!important'：

    .leading-none {
  line-height: 1 !important;
}
.leading-tight {
  line-height: 1.25 !important;
}
.leading-snug {
  line-height: 1.375 !important;
}
/* etc. */

    这也适用于您使用 CSS 中的 '@layer utilities' 指令创建的自定义工具。

    /* Input */
@layer utilities {
  .bg-brand-gradient {
    background-image: linear-gradient(#3490dc, #6574cd);
  }
}

/* Output */
.bg-brand-gradient {
  background-image: linear-gradient(#3490dc, #6574cd) !important;
}

    选择器策略： 将 important 设置为 true 可能会导致使用内联样式的第三方 JS 库发生冲突，因为 Tailwind 的 '!important' 工具将覆盖它们并可能破坏您的设计。

    为避免此问题，请遵循以下措施：

    • 将 'important' 设置为像 '#app' 这样的 ID 选择器。此配置使用给定的选择器为您的工具添加前缀，在不使用 '!important' 的情况下提高它们的特异性。
    /** @type {import('tailwindcss').Config} */
module.exports = {
  // ...
  important: '#app',
}
  • 为确保样式正常工作，请为站点的根元素赋予与重要选择器相同的 id，例如 id="app"。
    • <html>
<!-- ... -->
<style>
  .high-specificity .nested .selector {
    color: blue;
  }
</style>
<body id="app">
  <div class="high-specificity">
    <div class="nested">
      <!-- Will be red-500 -->
      <div class="selector text-red-500"><!-- ... --></div>
    </div>
  </div>

  <!-- Will be #bada55 -->
  <div class="text-red-500" style="color: #bada55;"><!-- ... --></div>
</body>
</html>
  • 确保在内容配置中包含包含您根选择器的模板文件。否则，在为生产构建时，您的所有 CSS 都将被删除。
  • 分隔符： separator 选项使您可以选择一个字符来分隔修饰符（如屏幕尺寸、悬停）和工具名称（例如 text-center）。默认使用冒号 (:)，但对于不支持特殊字符的模板语言（如 Pug），您可以更改它。 
    /** @type {import('tailwindcss').Config} */
module.exports = {
  // ...
  separator: '_',
}
  • 核心插件： 您可以使用 corePlugins 部分关闭任何不需要的默认 Tailwind 类。只需在 corePlugins 对象中将不需要的插件设置为 false。 
    /** @type {import('tailwindcss').Config} */
module.exports = {
  corePlugins: {
    float: false,
    objectFit: false,
    objectPosition: false,
  }
}

    如果您希望将哪些核心插件列入白名单，请在数组中列出它们。

    /** @type {import('tailwindcss').Config} */
module.exports = {
  corePlugins: [
    'margin',
    'padding',
    'backgroundColor',
    // ...
  ]
}

    如果您想禁用所有 Tailwind 的核心插件并仅使用您的自定义插件，请提供一个空数组。

    /** @type {import('tailwindcss').Config} */
module.exports = {
  corePlugins: []
}

设置多个配置

对于具有多个 CSS 文件和不同 Tailwind 设置的项目，使用 @config 指令为每个 CSS 文件选择配置文件。

@config "./tailwind.site.config.js";

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

在 JavaScript 中管理引用

您可能需要在 JavaScript 代码中使用配置值，例如向 React 或 Vue 组件添加样式时。Tailwind 的 resolveConfig 助手通过将它们组合到一个对象中，使访问这些值变得容易。

import resolveConfig from 'tailwindcss/resolveConfig'
import tailwindConfig from './tailwind.config.js'

const fullConfig = resolveConfig(tailwindConfig)

fullConfig.theme.width[4]
// => '1rem'

fullConfig.theme.screens.md
// => '768px'

fullConfig.theme.boxShadow['2xl']
// => '0 25px 50px -12px rgba(0, 0, 0, 0.25)'

TypeScript 类型

Tailwind CLI 会自动添加类型，但如果您需要自己添加，请在配置上方添加一行。

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    // ...
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}
版权声明

本文仅代表作者观点，不代表本站立场。
本文系作者授权本站发表，未经许可，不得转载。

上一篇： Tailwind CSS - 函数与指令 下一篇：Tailwind CSS 内容配置详解
相关文章
admin

admin

作者文章
浏览更多
热门
最新文章
标签列表
    闽ICP备2022017130号-1
    Powered By Z-BlogPHP Theme By 编程老白