Skip to content

Instantly share code, notes, and snippets.

@defenestrator
Last active June 30, 2022 13:52
  • Star 2 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
Star You must be signed in to star a gist
Save defenestrator/fd293be000d7b8c4d2d8075c2c238926 to your computer and use it in GitHub Desktop.
Laravel Tailwind and Svelte 3: simple configuration.
{
"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"
}
}
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'),
]
}
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!
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment