How to get multiple CSS output from tailwind

First you should ask yourself why do you want to do this? Creating a separate style-sheet for each individual page (home, about, etc) is not really common. The focus is on re-usability and possibly only adding additional styles.

If you are concerned about the file size, then do not integrate Tailwind via CDN but build your own style. Then you have access to the purge function. Purge kicks out all unused styles and the result is a very small CSS file.

You can use:

const mix = require('laravel-mix')

mix.postCss('input.css', 'output.css', [
  require('tailwindcss')`enter code here`('./tailwind.config.js'),
  require('autoprefixer')
])
.postCss('input.css', 'output-pdf.css', [
  require('tailwindcss')('./tailwind-custom.config.js'),
  require('autoprefixer')
])

You'll need to install TailwindCSS as PostCSS plugin as well as postcss-import and autoprefixer. Then create postcss.config.js in root directory and add:

module.exports = {
  plugins: {
    'postcss-import': {},
    tailwindcss: {},
    autoprefixer: {},
  }
}

then you can add as many css files as needed in your css directory, albeit with some concerns following this documentation

Keep in mind, you should only use one css for all pages in your web unless you have multiple projects with different styling required.

If you want multiple CSS output , then you should not be using Tailwind for your project.