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

Question

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

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

由于我们正在创建一个基础架构，我们希望将此文件拆分为两个配置文件并 rejoin/recompile 它们在 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)'
          }
        }
      }
    },
  },

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

可能吗？怎么样？

Answer 1

您可以使用 presets。您的 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')
  ],
  // ...
}

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

Is it possible to compile tailwind.config.js from multiple sources?

next.js

tailwind-css