tailwind configuration for a medium size svelte/sapper project

tailwind.config.js

// 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;