'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 |
|---|
