Skip to content

Instantly share code, notes, and snippets.

@nhattran998

nhattran998/tailwind.config.js

Forked from paulovieira/tailwind.config.js
Created March 9, 2021 14:51
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save nhattran998/9ba22be30c385fc8930561a1560dd61b to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save nhattran998/9ba22be30c385fc8930561a1560dd61b to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. @paulovieira paulovieira created this gist Mar 9, 2021.
    486 changes: 486 additions & 0 deletions tailwind.config.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,486 @@
    // reference: https://tailwindcss.com/docs/configuration

    let Path = require('path');
    let TailwindUi = require('@tailwindcss/ui')
    let TailwindDebugScreens = require('./plugins/tailwindcss-debug-screens.js'); // customized: https://github.com/jorenvanhee/tailwindcss-debug-screens/issues/3
    let TailwindFilters = require('tailwindcss-filters');

    let defaultTheme = require('tailwindcss/defaultTheme')

    console.log({ 'process.env.NODE_ENV': process.env.NODE_ENV });


    // all top level properties are extracted into dedicated variables

    // 1 - FUTURE

    // reference:
    // https://v1.tailwindcss.com/docs/upcoming-changes
    // https://v1.tailwindcss.com/docs/release-notes

    let future = {
    removeDeprecatedGapUtilities: true,
    purgeLayersByDefault: true,
    defaultLineHeights: true,
    standardFontWeights: true
    };


    let experimental = {

    // v1.9: "Add experimental 2xl"
    // https://github.com/tailwindlabs/tailwindcss/pull/2468
    additionalBreakpoint: true,

    // 1.7: "Use @apply with variants and other complex classes"
    // https://github.com/tailwindlabs/tailwindcss/pull/2159
    applyComplexClasses: true,

    // v1.7: "every color at every shade has a similar perceived brightness."
    // https://github.com/tailwindlabs/tailwindcss/pull/2132
    uniformColorPalette: true,

    // v1.9: "bigger spacing scale, includes new micro values like 0.5, 1.5, 2.5, and 3.5, as well as new large values like 72, 80, and 96"
    // https://github.com/tailwindlabs/tailwindcss/pull/2141
    // it's disabled because we are already doing it in theme.extend.scale
    extendedSpacingScale: false,

    // v1.9: "three new font sizes (7xl, 8xl, and 9xl)"
    // https://github.com/tailwindlabs/tailwindcss/pull/2145
    extendedFontSizeScale: true,
    };

    // 2 - PURGE

    let purge = {
    enabled: false,
    content: [
    Path.join(__dirname, '..', 'src', '**/*.html'),
    Path.join(__dirname, '..', 'src', '**/*.svelte'),
    //Path.join(__dirname, '..', 'src/routes/dummy-page', '*.svelte'),
    ],
    // These options are passed through directly to PurgeCSS
    // https://purgecss.com/configuration.html#options
    options: {
    // whitelist: [],
    }
    };

    if (process.env.NODE_ENV === 'prod') {
    purge.enabled = true;
    }


    // 3 - THEME

    let theme = {};


    // plugin: tailwindcss-debug-screens; will generate .debug-screens

    theme.debugScreens = {
    style: {
    fontSize: '14px',
    fontFamily: 'monospace',

    // ...
    },
    alternateBackgroundColor: defaultTheme.colors.indigo['700']
    };

    // plugin: tailwindcss-filters; will generate .filter-none, .filter-grayscale-0, .filter-grayscale-10, etc

    theme.filter = {
    'none': 'none',
    'grayscale-0': 'grayscale(0)',
    'grayscale-10': 'grayscale(0.1)',
    'grayscale-20': 'grayscale(0.2)',
    'grayscale-30': 'grayscale(0.3)',
    'grayscale-40': 'grayscale(0.4)',
    'grayscale-50': 'grayscale(0.5)',
    'grayscale-60': 'grayscale(0.6)',
    'grayscale-70': 'grayscale(0.7)',
    'grayscale-80': 'grayscale(0.8)',
    'grayscale-90': 'grayscale(0.9)',
    'grayscale-100': 'grayscale(1)',
    //'invert': 'invert(1)',
    //'sepia': 'sepia(1)',
    };

    // plugin: https://github.com/benface/tailwindcss-filters
    // will generate .backdrop-none, .backdrop-blur-1, etc

    theme.backdropFilter = {
    'none': 'none',

    // use the first values in the spacing scale

    'blur-1': 'blur(1px)',
    'blur-2': 'blur(2px)',
    'blur-3': 'blur(3px)',
    'blur-4': 'blur(4px)',
    'blur-5': 'blur(5px)',
    'blur-10': 'blur(10px)',
    };

    // plugin: https://github.com/benface/tailwindcss-typography
    // will generate .text-shadow, .text-shadow-lg, .text-shadow-1, etc

    // NOTE: there is also https://github.com/tailwindlabs/tailwindcss-typography

    theme.textShadow = {
    'default': '0 2px 5px rgba(0, 0, 0, 0.5)',
    '1': '1px 1px 0.25rem rgba(0, 0, 0, 0.5)',
    '2': '1px 1px 0.5rem rgba(0, 0, 0, 0.5)',
    '3': '1px 1px 0.75rem rgba(0, 0, 0, 0.5)',
    '4': '1px 1px 1rem rgba(0, 0, 0, 0.5)',
    'lg': '1px 1px 10px rgba(0, 0, 0, 0.5)',
    }

    theme.extend = {
    fontFamily: {
    sans: [/*'Avenir',*/ 'Inter var', ...defaultTheme.fontFamily.sans],
    },

    // the screens configuration is now done by tailwind 1.9 using experimental.additionalBreakpoint

    screens: {
    //'3xl': '1792px' // = screens.xl + 256

    // NOTE: we could name the breakpoint as '2xl' however the css spec says " cannot start with a digit"; see:
    // https://mathiasbynens.be/notes/css-escapes
    // https://stackoverflow.com/a/59058206/4174108
    // (but tailwind would escape the classes correctly and the output would work in chrome)
    },
    /*
    */

    spacing: {
    // @tailwindcss/ui already provides some extra "half-values" to the default spacing scale (0.5, 1.5, 2.5, 3.5)
    // here we add some more extra "quarter-values" to the small values

    // px: '1px',
    // '0': '0',
    '0.25': '0.0625rem', // 1px = 0,0625rem (extra)
    // '0.5': '0.125rem', // 2px = 2 * 0,0625rem
    '0.75': '0.1875rem', // 3px = 3 * 0,0625rem (extra)
    // '1': '0.25rem', // 4px = ...
    '1.25': '0.3125rem', // 5px (extra)
    // '1.5': '0.375rem', // 6px
    '1.75': '0.4375rem', // 7px (extra)
    // '2': '0.5rem', // 8px
    '2.25': '0.5625rem', // 9px (extra)
    // '2.5': '0.625rem', // 10px
    '2.75': '0.6875rem', // 11px (extra)

    // '3': '0.75rem',
    // '3.5': '0.875rem',
    // '4': '1rem',
    '4.5': '1.125rem', // (extra)
    // '5': '1.25rem',
    '5.5': '1.375rem', // (extra)
    // '6': '1.5rem',

    //'20': '5rem',
    '22': '5.5rem', // (extra)
    //'24': '6rem',
    },

    maxWidth: {
    '8xl': '88rem',
    '9xl': '96rem',
    '10xl': '104rem',
    },

    opacity: {
    '80': '0.80',
    '80': '0.85',
    '90': '0.90',
    },

    // .max-h-5vh, .max-h-10vh, ...
    maxHeight: {
    '5vh': '5vh',
    '10vh': '10vh',
    '15vh': '15vh',
    '20vh': '20vh',
    '25vh': '25vh',
    '30vh': '30vh',
    '35vh': '35vh',
    '40vh': '40vh',
    '45vh': '45vh',
    '50vh': '50vh',
    '55vh': '55vh',
    '60vh': '60vh',
    '65vh': '65vh',
    '70vh': '70vh',
    '75vh': '75vh',
    '80vh': '80vh',
    '85vh': '85vh',
    '90vh': '90vh',
    '95vh': '95vh',
    },

    // .min-h-5vh, .min-h-10vh, ...
    minHeight: {
    '5vh': '5vh',
    '10vh': '10vh',
    '15vh': '15vh',
    '20vh': '20vh',
    '25vh': '25vh',
    '30vh': '30vh',
    '35vh': '35vh',
    '40vh': '40vh',
    '45vh': '45vh',
    '50vh': '50vh',
    '55vh': '55vh',
    '60vh': '60vh',
    '65vh': '65vh',
    '70vh': '70vh',
    '75vh': '75vh',
    '80vh': '80vh',
    '85vh': '85vh',
    '90vh': '90vh',
    '95vh': '95vh',
    },

    // .max-w-5vh, .max-w-10vh, ...
    maxWidth: {
    '5vw': '5vw',
    '10vw': '10vw',
    '15vw': '15vw',
    '20vw': '20vw',
    '25vw': '25vw',
    '30vw': '30vw',
    '35vw': '35vw',
    '40vw': '40vw',
    '45vw': '45vw',
    '50vw': '50vw',
    '55vw': '55vw',
    '60vw': '60vw',
    '65vw': '65vw',
    '70vw': '70vw',
    '75vw': '75vw',
    '80vw': '80vw',
    '85vw': '85vw',
    '90vw': '90vw',
    '95vw': '95vw',
    },

    // leafletjs has some classes with high z-index values; here we add those values and a respective sucessor (value+1)

    zIndex: {
    '100': '100',
    '101': '101',
    '200': '200',
    '201': '201',
    '400': '400',
    '401': '401',
    '500': '500',
    '501': '501',
    '600': '600',
    '601': '601',
    '650': '650',
    '651': '651',
    '700': '700',
    '701': '701',
    '800': '800',
    '801': '801',
    '1000': '1000',
    '1001': '1001',
    '1002': '1002',
    '1003': '1003',
    'modal': '1100',
    },

    // long transition durations (used for testing)

    transitionDuration: {
    '2000': '2000ms',
    '3000': '3000ms',
    '4000': '4000ms',
    '5000': '5000ms',
    '6000': '6000ms',
    '7000': '7000ms',
    '8000': '8000ms',
    '9000': '9000ms',
    '10000': '10000ms',
    },

    // reference: https://github.com/tailwindlabs/tailwindcss-typography/tree/v0.2.0
    // note that this configuration has changed with tailwind v2, which uses typography 0.3.0

    typography: {
    default: {
    css: {
    a: {
    color: defaultTheme.colors.blue[600],
    textDecoration: 'underline',
    '&:hover': {
    color: defaultTheme.colors.blue[700],
    },
    },
    // ...
    },
    },
    },

    // new gray colors from tailwind v2: https://github.com/tailwindlabs/tailwindcss/blob/master/colors.js

    colors: {
    'warm-gray-v2': {
    50: '#fafaf9',
    100: '#f5f5f4',
    200: '#e7e5e4',
    300: '#d6d3d1',
    400: '#a8a29e',
    500: '#78716c',
    600: '#57534e',
    700: '#44403c',
    800: '#292524',
    900: '#1c1917',
    },
    /*
    'true-gray-v2': {
    50: '#fafafa',
    100: '#f5f5f5',
    200: '#e5e5e5',
    300: '#d4d4d4',
    400: '#a3a3a3',
    500: '#737373',
    600: '#525252',
    700: '#404040',
    800: '#262626',
    900: '#171717',
    },
    'gray-v2': {
    50: '#fafafa',
    100: '#f4f4f5',
    200: '#e4e4e7',
    300: '#d4d4d8',
    400: '#a1a1aa',
    500: '#71717a',
    600: '#52525b',
    700: '#3f3f46',
    800: '#27272a',
    900: '#18181b',
    },
    'cool-gray-v2': {
    50: '#f9fafb',
    100: '#f3f4f6',
    200: '#e5e7eb',
    300: '#d1d5db',
    400: '#9ca3af',
    500: '#6b7280',
    600: '#4b5563',
    700: '#374151',
    800: '#1f2937',
    900: '#111827',
    },
    */
    // 'blue-gray-v2' is the same as 'cool-gray' in @tailwindcss/ui/colors.js (for the first 3 shades)

    'blue-gray-v2': {
    50: '#f8fafc',
    100: '#f1f5f9',
    200: '#e2e8f0',
    300: '#cbd5e1',
    400: '#94a3b8',
    500: '#64748b',
    600: '#475569',
    700: '#334155',
    800: '#1e293b',
    900: '#0f172a',
    },
    /*
    'blue-v2': {
    50: '#eff6ff',
    100: '#dbeafe',
    200: '#bfdbfe',
    300: '#93c5fd',
    400: '#60a5fa',
    500: '#3b82f6',
    600: '#2563eb',
    700: '#1d4ed8',
    800: '#1e40af',
    900: '#1e3a8a',
    },
    'light-blue-v2': {
    50: '#f0f9ff',
    100: '#e0f2fe',
    200: '#bae6fd',
    300: '#7dd3fc',
    400: '#38bdf8',
    500: '#0ea5e9',
    600: '#0284c7',
    700: '#0369a1',
    800: '#075985',
    900: '#0c4a6e',
    },
    */
    }
    };


    // 4 - CORE PLUGINS

    // reference: https://tailwindcss.com/docs/configuration#core-plugins

    // 4.1 - If you'd like to disable specific core plugins, set those plugins to false

    let corePlugins = {}; // an empty object means that all core plugins will be enabled

    // 4.2 - If you'd like to whitelist which core plugins should be enabled, provide an array
    // that includes a list of the core plugins you'd like to use

    if (process.env.NODE_ENV === 'debug') {
    corePlugins = ['fontFamily'];
    }


    // 5 - PLUGINS

    let plugins = [
    TailwindUi,
    TailwindDebugScreens,
    TailwindFilters,
    ];

    if (process.env.NODE_ENV === 'debug') {
    plugins = [];
    }

    // 6 - VARIANTS

    let variants = {
    filter: ['responsive', 'hover', 'group-hover'],
    backdropFilter: ['responsive', 'hover', 'group-hover'],
    };

    // 7 - OTHER OPTIONS (NOT USED)

    // let target = 'relaxed';
    // let prefix = '';
    // let important = false;
    // let separator = ':';

    let config = {
    future,
    experimental,
    purge,
    theme,
    corePlugins,
    plugins,
    variants,

    // OTHER OPTIONS (NOT USED)

    // target,
    // prefix,
    // important,
    // separator,

    };

    module.exports = config;