Laravel Tailwind and Svelte 3: simple configuration.

package.json

{
    "private": true,
    "scripts": {
        "dev": "npm run development",
        "development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
        "watch": "npm run development -- --watch",
        "watch-poll": "npm run watch -- --watch-poll",
        "hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js",
        "prod": "npm run production",
        "production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
    },
    "devDependencies": {
        "@fullhuman/postcss-purgecss": "^2.3.0",
        "@tailwindcss/custom-forms": "^0.2.1",
        "axios": "^0.19.2",
        "browser-sync": "^2.26.7",
        "browser-sync-webpack-plugin": "^2.2.2",
        "cross-env": "^5.2.1",
        "extract-text-webpack-plugin": "^3.0.2",
        "laravel-mix": "~5.0",
        "laravel-mix-svelte": "^0.1.6",
        "laravel-mix-tailwind": "^0.1.0",
        "lodash": "^4.17.15",
        "postcss-import": "^12.0.1",
        "postcss-nesting": "^7.0.1",
        "postcss-tree-shaking": "^1.0.0",
        "resolve-url-loader": "^2.3.1",
        "svelte": "^3.23.2",
        "svelte-loader": "^2.13.6",
        "tailwindcss": "^1.4.6",
        "vue-template-compiler": "^2.6.11"
    }
}

tailwind.config.js

const defaultTheme = require('tailwindcss/defaultTheme')

module.exports = {
    purge: {
        content: [
        './resources/**/*.html',
        './resources/**/*.vue',
        './resources/**/*.svelte',
        './resources/**/*.php',
        './resources/**/*.css',
        ]
  },
  variants: {
    fill: ['responsive', 'hover', 'focus', 'group-hover'],
    textColor: ['responsive', 'hover', 'focus', 'group-hover'],
    zIndex: ['responsive', 'focus'],
  },
  plugins: [
    require('@tailwindcss/custom-forms'),
    require('tailwindcss'),
    require('autoprefixer'),
  ]
}

webpack.mix.js

const mix = require('laravel-mix')
require('laravel-mix-tailwind')
require('laravel-mix-svelte')

mix.js('./resources/js/app.js', 'public/js')
    .postCss('resources/css/app.css', 'public/css/app.css', [
        require('postcss-import'),
        require('tailwindcss'),
        ]
    )
    .tailwind({
        configPath: '/tailwind.config.js'
    })
    .svelte()
    .version()
    .sourceMaps()
// Awesome show, great job!