app.css

/* purgecss start ignore */
@tailwind base;
@tailwind components;
/* purgecss end ignore */

/* 
...
...
...other css
...
...
*/

@tailwind utilities;

tailwind.config.js

module.exports = {
  prefix: '',
  important: false,
  separator: ':',
  theme: {
    zIndex: {
      '0': 0,
      '10': 10,
      '20': 20,
      '30': 30,
      '40': 40,
      '50': 50,
      '25': 25,
      '50': 50,
      '60': 60,
      '70': 70,
      '75': 75,
      '80': 80,
      '90': 90,
      '100': 100,
      '110': 110,
      '120': 120,
      'auto': 'auto',
    },
    extend: {
      screens: {
        'xxl': '1600px'
      },
      fontSize: {
        '7xl': '5rem',
        '8xl': '6rem'
      },
      inset: {
        '8': '2rem',
        '16': '4rem',
        '32': '8rem',
        '48': '12rem',
        '64': '16rem',
        '1/2': '50%',
        '2/3': '66.6%',
        '3/4': '75%',
        '1/12': '8.333333%'
      },
      minHeight: {
        '64': '16rem',
        '96': '24rem',
        '128': '32rem',
        '256': '64rem',
        '512': '128rem',
      },
      maxHeight: {
        '64': '16rem',
        '96': '24rem',
      },
      spacing: {
        '72': '18rem',
        '80': '20rem',
        '96': '24rem',
        '128': '32rem',
        '192': '48rem',
        '256': '64rem',
        '512': '128rem',
        '1/2': '50%',
        '1/3': '33.333333%',
        '2/3': '66.666667%',
        '1/4': '25%',
        '2/4': '50%',
        '3/4': '75%',
        '1/5': '20%',
        '2/5': '40%',
        '3/5': '60%',
        '4/5': '80%',
        '1/6': '16.666667%',
        '2/6': '33.333333%',
        '3/6': '50%',
        '4/6': '66.666667%',
        '5/6': '83.333333%',
        '1/12': '8.333333%',
        '2/12': '16.666667%',
        '3/12': '25%',
        '4/12': '33.333333%',
        '5/12': '41.666667%',
        '6/12': '50%',
        '7/12': '58.333333%',
        '8/12': '66.666667%',
        '9/12': '75%',
        '10/12': '83.333333%',
        '11/12': '91.666667%',
        'full-96': 'calc(100% - 24rem)',
        'full-64': 'calc(100% - 16rem)',
        'full-32': 'calc(100% - 8rem)',
        'full-16': 'calc(100% - 4rem)'
      }
    }
  },
  variants: {
    textColor: ['responsive', 'hover', 'focus', 'group-hover']
  },
  plugins: [
    require('@tailwindcss/ui'),
    require('@tailwindcss/custom-forms'),
    require("tailwindcss-responsive-embed")(),
    require("tailwindcss-aspect-ratio")({
      ratios: {
        square: [1, 1],
        "16/9": [16, 9],
        "4/3": [4, 3],
        "21/9": [21, 9]
      }
    }),
  ]
}

webpack.mix.js

const purgecss = require('@fullhuman/postcss-purgecss')({
  content: [
    './resources/views/**/*.blade.php',
    './resources/views/**/*.html',
    './resources/js/**/*.vue',
    // etc.
  ],
  defaultExtractor: content => content.match(/[\w-/.:]+(?<!:)/g) || []
})

mix.js('resources/js/app.js', 'public/js')
  .postCss('resources/css/app.css', 'public/css/app.css')
  .options({
    postCss: [
      tailwindcss('tailwind.config.js'),
      ...(mix.inProduction() ? [purgecss] : [])
    ]
  }).webpackConfig({
    plugins: [new FlareWebpackPluginSourcemap({ key: "****" })]
  }).version().sourceMaps(true, 'hidden-source-map');