Different tailwindcss configs per layer

[Satont]

I need to separate styles for my two layers, because i'm splitting my application logic.

I have

• landing which is landing layer with default tailwind css
• dashboard which is dashboard layer with need of customized tailwind config

module.exports = {
	content: [`${currentDir}/**/*.{html,js,vue,ts,tsx}`],
	darkMode: 'class',
	theme: {
		extend: {
			container: {
				center: true,
				padding: {
					DEFAULT: '1rem',
					sm: '2rem',
					lg: '4rem',
				},
				screens: {
					'2xl': '1300px',
				},
			},
			fontFamily: {
				sans: ['Inter var', 'Inter', ...fontFamily.sans],
			},
			borderRadius: {
				lg: 'var(--radius)',
				md: 'calc(var(--radius) - 2px)',
				sm: 'calc(var(--radius) - 4px)',
			},
			keyframes: {
				'accordion-down': {
					from: { height: '0px' },
					to: { height: 'var(--radix-accordion-content-height)' },
				},
				'accordion-up': {
					from: { height: 'var(--radix-accordion-content-height)' },
					to: { height: '0px' },
				},
				'fadeIn': {
					from: { opacity: '0' },
					to: { opacity: '1' },
				},
				'fadeOut': {
					from: { opacity: '1' },
					to: { opacity: '0' },
				},
				'collapse-down': {
					from: { height: '0px' },
					to: { height: 'var(--radix-collapsible-content-height)' },
				},
				'collapse-up': {
					from: { height: 'var(--radix-collapsible-content-height)' },
					to: { height: '0px' },
				},
			},
			animation: {
				'accordion-down': 'accordion-down 0.2s ease-out',
				'accordion-up': 'accordion-up 0.2s ease-out',
				'fadeIn': 'fadeIn 0.2s ease-out',
				'fadeOut': 'fadeOut 0.2s ease-out',
				'collapse-down': 'collapse-down 0.2s ease-out',
				'collapse-up': 'collapse-up 0.2s ease-out',
			},
			colors: {
				border: 'hsl(var(--border))',
				input: 'hsl(var(--input))',
				ring: 'hsl(var(--ring))',
				background: 'hsl(var(--background))',
				foreground: 'hsl(var(--foreground))',
				primary: {
					DEFAULT: 'hsl(var(--primary))',
					foreground: 'hsl(var(--primary-foreground))',
				},
				secondary: {
					DEFAULT: 'hsl(var(--secondary))',
					foreground: 'hsl(var(--secondary-foreground))',
				},
				destructive: {
					DEFAULT: 'hsl(var(--destructive))',
					foreground: 'hsl(var(--destructive-foreground))',
				},
				muted: {
					DEFAULT: 'hsl(var(--muted))',
					foreground: 'hsl(var(--muted-foreground))',
				},
				accent: {
					DEFAULT: 'hsl(var(--accent))',
					foreground: 'hsl(var(--accent-foreground))',
				},
				popover: {
					DEFAULT: 'hsl(var(--popover))',
					foreground: 'hsl(var(--popover-foreground))',
				},
				card: {
					DEFAULT: 'hsl(var(--card))',
					foreground: 'hsl(var(--card-foreground))',
				},
			},
		},
	},
	plugins: [require('tailwindcss-animate'), require('@tailwindcss/forms')({ strategy: 'class' })],
}

However, only works base tailwind config, which is inherited from landing i guess?

How i can make this config works for /dashboard layer?