I would like to use separate config files for my app frontend and backend. I found myself in this situation when I started using "Tailadmin"; a free tailwind admin panel template. The admin panel tailwind config file is heavily customized and affects the entire app. I would like to have separate themes. After playing around with some potential solutions to this issue, I found myself in quite a conundrum. One of the websites found that talks about this exact use case is described here: https://scriptmint.com/blog/how-to-use-multiple-vite-tailwind-css-configs-in-laravel-644e6db823d13
If it's possible to do use separate config files, what am I doing wrong?
The code I have now is producing the following error:
failed to load config from D:\laragon\www\laravel-ads\vite.frontend.config.js
error when starting dev server:
Error: Dynamic require of "file:///D:/laragon/www/laravel-ads/node_modules/tailwindcss/lib/index.js" is not supported
at file:///D:/laragon/www/laravel-ads/vite.frontend.config.js.timestamp-1692536963026-24ea91f51cdcc.mjs:6:9
at file:///D:/laragon/www/laravel-ads/vite.frontend.config.js.timestamp-1692536963026-24ea91f51cdcc.mjs:34:9
at ModuleJob.run (node:internal/modules/esm/module_job:198:25)
at async Promise.all (index 0)
at async ESMLoader.import (node:internal/modules/esm/loader:385:24)
at async loadConfigFromBundledFile (file:///D:/laragon/www/laravel-ads/node_modules/vite/dist/node/chunks/dep-df561101.js:66235:21)
at async loadConfigFromFile (file:///D:/laragon/www/laravel-ads/node_modules/vite/dist/node/chunks/dep-df561101.js:66086:28)
at async resolveConfig (file:///D:/laragon/www/laravel-ads/node_modules/vite/dist/node/chunks/dep-df561101.js:65682:28)
at async _createServer (file:///D:/laragon/www/laravel-ads/node_modules/vite/dist/node/chunks/dep-df561101.js:64959:20)
at async CAC.<anonymous> (file:///D:/laragon/www/laravel-ads/node_modules/vite/dist/node/cli.js:743:24)
Here is the code I'm using.
- tailwind.frontend.config.js
import defaultTheme from 'tailwindcss/defaultTheme';
/** @type {import('tailwindcss').Config} */
export default {
darkMode: 'class',
content: [
'./vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php',
'./storage/framework/views/*.php',
'./resources/views/**/*.blade.php',
'./resources/**/*.js',
'./resources/**/*.vue',
],
theme: {
extend: {
fontFamily: {
sans: ['Figtree', ...defaultTheme.fontFamily.sans],
},
},
},
plugins: [
require('@tailwindcss/forms'),
require('@tailwindcss/typography'),
require('@tailwindcss/forms'),
],
};
- Tailwind.backend.config.js
export default {
darkMode: 'class',
content: [
'./vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php',
'./storage/framework/views/*.php',
'./resources/views/**/*.blade.php',
'./resources/**/*.js',
],
theme: {
extend: {
fontFamily: {
sans: ['Figtree', ...defaultTheme.fontFamily.sans],
},
},
},
plugins: [
require('@tailwindcss/forms'),
require('@tailwindcss/typography'),
require('@tailwindcss/forms'),
],
};
import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import vue from '@vitejs/plugin-vue';
export default defineConfig({
plugins: [
laravel({
input: [
'resources/scss/app.frontend.scss',
'resources/js/app.frontend.js',
],
refresh: true,
}),
vue({
template: {
transformAssetUrls: {
base: null,
includeAbsolute: false,
},
},
}),
],
css: {
postcss: {
plugins: [
require("tailwindcss")({
config: "./tailwind.frontend.config.js",
}),
require("autoprefixer"),
],
},
},
resolve: {
alias: {
'$': 'jQuery'
},
},
});
import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import vue from '@vitejs/plugin-vue';
export default defineConfig({
plugins: [
laravel({
buildDirectory: "public/site/build",
input: [
'resources/scss/app.backend.scss',
'resources/js/app.backend.scss',
],
refresh: true,
}),
vue({
template: {
transformAssetUrls: {
base: null,
includeAbsolute: false,
},
},
}),
],
css: {
postcss: {
plugins: [
require("tailwindcss")({
config: "./tailwind.backend.config.js",
}),
require("autoprefixer"),
],
},
},
resolve: {
alias: {
'$': 'jQuery'
},
},
});
{
"private": true,
"type": "module",
"scripts": {
"dev-front": "vite --config vite.frontend.config.js",
"dev-back": "vite --config vite.backend.config.js",
"dev": "dev-front && dev-back",
"prod-front": "vite build --config vite.frontend.config.js",
"prod-back": "vite build --config vite.backend.config.js",
"prod": "prod-front && prod-back"
},
"devDependencies": {
"@tailwindcss/aspect-ratio": "^0.4.2",
"@tailwindcss/forms": "^0.5.2",
"@tailwindcss/typography": "^0.5.9",
"@vitejs/plugin-vue": "^4.3.1",
"alpinejs": "^3.4.2",
"autoprefixer": "^10.4.2",
"axios": "^1.1.2",
"cross-env": "^7.0.3",
"css-loader": "^6.8.1",
"html-loader": "^4.2.0",
"jquery": "^3.7.0",
"laravel-vite-plugin": "^0.8.0",
"lodash": "^4.17.21",
"mini-css-extract-plugin": "^2.7.6",
"postcss": "^8.4.6",
"postcss-import": "^15.1.0",
"postcss-preset-env": "^9.1.1",
"sass": "^1.65.1",
"sass-loader": "^13.3.2",
"style-loader": "^3.3.3",
"tailwindcss": "^3.1.0",
"vite": "^4.0.0",
"vue": "^3.3.4",
"vue-template-compiler": "^2.7.14"
}
}
