是否可以从多个来源编译 tailwind.config.js ？

Question

这是一个典型的tailwind.config.js文件：

module.exports = {
  content: [
    "./pages/**/*.{js,ts,jsx,tsx}",
    "./components/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

由于我们正在创建一个基础架构，因此我们希望将此文件拆分为两个配置文件，并在 nextjs 构建之前重新加入/重新编译它们。

例如，我们希望tailwind.config.base.js它是集中的并包含：

  content: [
    "./pages/**/*.js",
    "./components/**/*.js",
    "./base/**/*.js",
    "./contents/**/*.js",
    "./modules/**/*.js"
    // Here we have a chance to centralize our directory structure
    // We can also prevent common mistakes
    // And we can ensure that all projects use js and not typescript
  ],
  plugins: [
    require('@tailwindcss/typography')
    // Here we have the chance to give all of our projects a unified toolset
  ]

然后每个项目都有自己的tailwind.config.project.js：

  theme: {
    extend: {
      colors: {
        tomato: {
          400: '#FD6A5E'
        }
      },
      animation: {
        wiggle: 'wiggle 5s infinite'
      },
      keyframes: {
        wiggle: {
          '0%, 100%': {
            transform: 'translateY(0.5rem) scale(0.5)'
          },
          '50%': {
            transform: 'translateY(0) scale(0.5)'
          }
        }
      }
    },
  },

然后我们会tailwind.config.js在每个 nextjs 构建之前创建一个。

是否可以？如何？

Answer 1

您可以使用预设。您的tailwind.config.project.js文件将包含项目的唯一预设

// tailwind.config.project.js

module.exports = { // specific project colors, animation, etc };

// tailwind.config.js

module.exports = {
  presets: [
    require('./path/to/tailwind.config.project.js')
  ],
  // ...
}