tailwind config starter - comments detail reminders + common project options w/ urls to relevant tailwind docs

tailwind.config.js

// this gist is meant to serve as a reminder for common tailwindcss configuration options.
// it features comments that are applicable to a range of projects from react to wordpress themes

// the palette and specific settings are for example purposes -- this file is not meant to be production-ready :)

// importing the default theme is useful for referencing it and building on it
const defaultTheme = require('tailwindcss/defaultTheme')

// the `plugin()` function is useful for a variety of purposes @see https://tailwindcss.com/docs/plugins
// for example, new styles can be added to one of tailwind's layers with project-specific class names
// const plugin = require('tailwindcss/plugin')

// if using in a wordpress theme use-case, you can add in a custom plugin that adds support for common built-in wp classes
// an example of this can be found in the tailpress project @see https://github.com/jeffreyvr/tailpress
// const wpPlugin = require('./tailwind.wordpress')

// consider using color package to assist with palette creation: add alpha(), lighten(), darken() functions
// an example usage is shown in a comment below
const Color = require('color')
const alpha = (c, val) => Color(c).alpha(val).rgb().string()
const lighen = (c, val) => Color(c).lighten(val).rgb().string()
const darken = (c, val) => Color(c).darken(val).rgb().string()

module.exports = {
  purge: {
    // note: setting `enabled: true` will always purge, otherwise tailwind will only purge when env is production
    // enabled: true,
    content: [
      // for a hypothetical wordpress project w/ separate plugin + theme folders under the src/ folder:
      './src/plugin/**/*.{php,js,jsx,ts,tsx}',
      './src/theme/**/*.{php,js,jsx,ts,tsx}',
      
      // for a hypothetical nextjs with source files moved under src/ folder:
      // './src/pages/**/*.{js,ts,jsx,tsx}'
      // './src/components/**/*.{js,ts,jsx,tsx}'],

      // if using with a cms like wordpress that is liable to add its own class names, adding a 'safe list' of
      // class names (e.g. txt file, one class name per line) helps ensure they aren't purged; also refer to the 
      // commented-out wordpress plugin note at the top and `plugins` property declaration below.
      // './tailwind.safelist.txt',
    ]
  },
  darkMode: false, // or 'media' or 'class'
  theme: {
    // the following example adds xxs breakpoint at 400px
    // note: iPhone 6/7/8 Plus = 414px, 6/7/8 = 375px, 5/SE = 320px
    // breakpoints must be defined in smallest->largest order, hence the example below where a new smaller breakpoint is 
    // added and then the other default breakpoints are then added via spread after it
    // @see - https://tailwindcss.com/docs/breakpoints
    screens: {
      'xxs': '400px',
      ...defaultTheme.screens,
    },
    
    // `fontFamily: { ... }` can be defined here to override tailwind defaults @see https://tailwindcss.com/docs/font-family
    
    extend: {
      // example of adding a custom font to the built-in tailwind `sans` family
      // remember to add any custom fonts to your project (e.g. in a react project in public folder index.html 
      // template, you could add <link rel="stylesheet" href="https://rsms.me/inter/inter.css">)
      fontFamily: {
        sans: ['Inter var', ...defaultTheme.fontFamily.sans],
      },

      // extending container is a common use-case
      // container: { center: true, padding: '1.5rem' } // equivalent to `container p-6 mx-auto` -> container
      
      // adding 0 + long transiton durations can help with debugging, especially when working with transitions in react
      // alongside transition and/or animation libraries like @headlessui/react <Transition> or react-spring
      transitionDuration: {
        '0': '0ms',
        '2000': '2000ms',
        '5000': '5000ms',
        '60000': '60000ms',
      },
      
      // bg transitions are expensive but are often sought after so here's a relevant example
      // by default (at time of writing) tailwind built-in has a 'transition-color' class but this covers foreground, 
      // background, etc. a lot of the time the desire is only for the bg to transition: 
      transitionProperty: {
        'bg': 'background-color',
      },
  
      // its helpful to define palette colors in the tailwind config to help with consistency in a project.
      // tailwind will generate the classes, usage e.g. `bg-brand-pewter` (DEFAULT), or `bg-brand-pewter-dark` (dark).
      colors: {
        brand: {
          heading: '#58585A',
          pewter: {
            light: '#D8E3E9',
            DEFAULT: '#80A1B7',
            dark: '#517690',
            darkHover: '#496B83',
          },
          blue: {
            DEFAULT: '#84B1D9',
            ultralight: '#E0EBF6',
            light: '#D0E1F1',
            lightDivide: '#C1D8EC',
            dark: '#306A9C',
            darkest: '#1D3F5E',
          },
          purple: {
            DEFAULT: '#524D88',
          },
          tan: {
            DEFAULT: '#BC9B6A',
          },
        },
        copy: {
          DEFAULT: '#515152',
          gray: '#515152',
          dark: '#3D3D3E', // e.g. use with color functions above: alpha('#3D3D3E', 0.1),
          darker: '#1E1E1F',
        },
        link: {
          'default': 'blue',
          'hover': 'darkblue',
        },
        button: {
          primary: {
            DEFAULT: '#ff0000',
            hover: '#ee0000',
          },
          secondary: {
            DEFAULT: '#0000ff',
            hover: '#0000ee',
          },
        },
      },
      
      // it can be helpful to add extra font sizes in some projects
      fontSize: {
        xxs: '0.675rem',
      },
      
      // extra line heights are common
      lineHeight: {
        tighter: '1.125',
      },
      
      // use with the tailwind/typography plugin 
      typography: (theme) => ({
        DEFAULT: {
          css: {
            color: theme('colors.copy.dark'),
            strong: {
              color: theme('colors.copy.gray'),
            },
            // p: { lineHeight: ... },
            h2: {
              color: theme('colors.copy.gray'),
            },
            h3: {
              color: theme('colors.copy.gray'),
            },
            h4: {
              color: theme('colors.copy.gray'),
            },
            h5: {
              color: theme('colors.copy.gray'),
            },
            h6: {
              color: theme('colors.copy.gray'),
            },
            a: {
              color: '#3182ce',
              '&:hover': {
                color: '#2c5282',
              },
            },
          },
        },
      }),
    },
  },
  variants: {
    extend: {
      // example of adding support for common css use-cases re forms and buttons
      opacity: ['disabled'],
      backgroundColor: ['checked'],
      borderColor: ['checked'],
      
      // example of support for changing type on hover or focus
      fontFamily: ['hover', 'focus'],
      
      // example of adding support for the last-child selector re padding + margins
      padding: ['last'],
      margin: ['last'],
    },
  },
  
  plugins: [
    // reference any complementary tailwind plugins
    require('@tailwindcss/forms'),
    require('@tailwindcss/aspect-ratio'),
    require('@tailwindcss/typography'),
    
    // if using wordpress (or other cms) and have a custom plugin for its genereated classes:
    // plugin(wpPlugin)
    
    // and of course, add in any project-specific plugins of your own...
  ],
}

https://github.com/borma425/2222press