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

Here's a typical tailwind.config.js file:

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

Since we are creating an infrastructure, we would love to split this file into two config files and rejoin/recompile them before nextjs build.

For example, we want to have tailwind.config.base.js that is centralized and contains:

  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
  ]

And then each project would have its own 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)'
          }
        }
      }
    },
  },

And then we would create a tailwind.config.js before each nextjs build.

Is it possible? How?



Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source