Vite configuration for tailwind css

Question

I want to add tailwind css to my CodeIgniter 4 application. To do so, I have created the following files.

I want the target to create a dist folder in public/assets and in it site and admin. In these folders should be styles.css and scripts.js files.

I am having trouble writing the configuration for vite.

When I run the build until I abort the script in public/assets the dist/site/assets/dist/site/assets/dist........ folders are still created for me.

Can you help me with writing the config for vite?

package.json:

{
  "name": "webap",
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "build": "npm run build:site && npm run build:admin",
    "build:site": "vite build --config vite.config.site.cjs",
    "build:admin": "vite build --config vite.config.admin.cjs"
  },
  "devDependencies": {
    "autoprefixer": "^10.4.20",
    "postcss": "^8.4.47",
    "sass": "^1.79.3",
    "tailwindcss": "^3.4.13",
    "vite": "^5.4.8"
  }
}

tailwind.config.admin.cjs:

/** @type {import('tailwindcss').Config} */
module.exports = {
    content: [
        './app/Views/admin/**/*.php',
        './public/assets/src/admin/**/*.scss',
        './public/assets/src/admin/**/*.js',
    ],
    theme: {
        extend: {},
    },
    plugins: [],
};

tailwind.config.site.cjs:

/** @type {import('tailwindcss').Config} */
module.exports = {
    content: [
        './app/Views/site/**/*.php',
        './public/assets/src/site/**/*.scss',
        './public/assets/src/site/**/*.js',
    ],
    theme: {
        extend: {},
    },
    plugins: [],
};

vite.config.admin.cjs:

const { defineConfig } = require('vite');
const path = require('path');
const tailwindcss = require('tailwindcss');
const autoprefixer = require('autoprefixer');

module.exports = defineConfig({
    build: {
        outDir: path.resolve(__dirname, 'public/assets/dist/admin'),
        rollupOptions: {
            input: path.resolve(__dirname, 'public/assets/src/admin/scripts/scripts.js'),
            output: {
                entryFileNames: 'scripts.js',
                assetFileNames: 'styles.css',
            }
        },
        emptyOutDir: true,
    },
    css: {
        postcss: {
            plugins: [
                tailwindcss('./tailwind.config.admin.cjs'),
                autoprefixer
            ]
        }
    }
});

vite.config.site.cjs:

const { defineConfig } = require('vite');
const path = require('path');
const tailwindcss = require('tailwindcss');
const autoprefixer = require('autoprefixer');

module.exports = defineConfig({
    build: {
        outDir: path.resolve(__dirname, 'public/assets/dist/site'),
        rollupOptions: {
            input: path.resolve(__dirname, 'public/assets/src/site/scripts/scripts.js'),
            output: {
                entryFileNames: 'scripts.js',
                assetFileNames: 'styles.css',
            }
        },
        emptyOutDir: true,
    },
    css: {
        postcss: {
            plugins: [
                tailwindcss('./tailwind.config.site.cjs'),
                autoprefixer
            ]
        }
    }
});

Answer 1

In vite.config.admin.cjs and vite.config.site.cjs try add:

publicDir: false

This disables default copying of files from the public folder, which prevents a loop.

module.exports = defineConfig({
    build: {
        ....
    },
    publicDir: false,
    css: {
        ....
    }
});