On gists

Tailwind advanced config

Tailwind CSS

tw.config..js Raw #

/*
URL: https://www.viget.com/articles/tips-for-your-tailwind-config/
*/

// Spread + negative
margin: (theme, { negative }) => ({
  auto: 'auto',
  ...theme('spacing'),
  ...negative(theme('spacing')),
})

// different units
const em = px => `${px / 16}em`
const rem = px => ({ [px]: `${px / 16}rem` })
const px = num => ({ [num]: `${num}px` })


screens: {
  sm: em(640),
  md: em(768),
  lg: em(1024),
  xl: em(1280),
},
borderWidth: {
  ...px(2),
  ...px(3),
  ...px(5),
},
fontSize: {
  ...rem(12),
  ...rem(13),
}


// colors
const tinycolor = require('tinycolor2')

module.exports = {
  // [...other tailwind code]
  theme: {
    colors: {
      'purple': '#9f7aea',
      'purple-50': tinycolor('#9f7aea').setAlpha(0.5).toRgbString(),
    }
  }
}

// or
module.exports = {
  // [...other tailwind code]
  theme: {
    colors: {
      'purple': '#9f7aea',
      'purple-50': 'color(#9f7aea a(50%))',
    }
  }
}


// screens, downwards, eg: only <= lg
screens: {
  tyd: { max: em(399) },
  ty: em(400),
  xsd: { max: em(599) },
  xs: em(600),
  smd: { max: em(767) },
  sm: em(768),
  mdd: { max: em(959) },
  md: em(960),
  lgd: { max: em(1023) },
  lg: em(1024),
  xld: { max: em(1279) },
  xl: em(1280),
}