Skip to content

Instantly share code, notes, and snippets.

@adamwathan
Last active August 15, 2020 03:29
Show Gist options
  • Save adamwathan/014e12ec03a0de80365658ade67761f0 to your computer and use it in GitHub Desktop.
Save adamwathan/014e12ec03a0de80365658ade67761f0 to your computer and use it in GitHub Desktop.
/* purgecss start ignore */
@tailwind base;
@tailwind components;
/* purgecss end ignore */
/*
...
...
...other css
...
...
*/
@tailwind utilities;
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]
}
}),
]
}
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');
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment