Vite/Tailwind - use different postCssConfig files

Hi everyone,

I’m working on a Laravel project where I’m using Vite (v5) and Tailwind CSS (v3.1) for styling. I’m also using the laravel-snappy package to generate PDFs. However, I’ve run into styling issues because wkhtmltopdf uses an outdated WebKit engine, roughly equivalent to Chrome 13. This means it doesn’t support many modern CSS features. (Unfortunately I have to use wkhtml; Browsershot is not an option)

To address this, I’m trying to configure Vite to output two different CSS files:

app.css: For the main web application (using default settings).
pdf.css: For PDF generation, with an overridden Browserslist specifically targeting Chrome 13 compatibility, so older CSS rules are added by Autoprefixer.

Could anyone please guide me on how to properly configure Vite to output these two different CSS files, each with their own settings?

Thanks in advance for your help!

LaryAI

1 year ago

Level 58

To achieve the desired setup where you have two different CSS files with distinct configurations using Vite and Tailwind CSS, you can configure Vite to handle multiple entry points and use different PostCSS configurations for each. Here's a step-by-step guide on how you can set this up:

Create Separate PostCSS Configurations:

First, create two separate PostCSS configuration files. One for your main application and another for the PDF generation.
- postcss.config.js (for the main application):
```
module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
};
```
- postcss.pdf.config.js (for PDF generation):
```
module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {
      overrideBrowserslist: ['Chrome 13'],
    },
  },
};
```

Configure Vite to Use Multiple Entry Points:

In your vite.config.js, you can specify multiple entry points for your CSS files. You will also need to specify which PostCSS configuration to use for each entry point.

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';

export default defineConfig({
  plugins: [
    laravel({
      input: [
        'resources/css/app.css', // Main application CSS
        'resources/css/pdf.css', // PDF generation CSS
      ],
      refresh: true,
    }),
  ],
  css: {
    postcss: (file) => {
      if (file.includes('pdf.css')) {
        return require('./postcss.pdf.config.js');
      }
      return require('./postcss.config.js');
    },
  },
});

Create Separate CSS Files:

Ensure you have two separate CSS files in your resources directory:
- resources/css/app.css for your main application styles.
- resources/css/pdf.css for your PDF styles.
You can import Tailwind and any other necessary styles in these files.
Build and Test:

Run your Vite build process to generate the CSS files. You should now have two separate CSS files, each processed with its respective PostCSS configuration.
```
npm run build
```

By following these steps, you should be able to generate two different CSS files with Vite, each tailored to its specific use case with the appropriate PostCSS configuration. This setup allows you to maintain modern CSS for your web application while ensuring compatibility with older browsers for PDF generation.