Tailwind Style Guide Template

styleguide.js

module.exports = {
  purge: false,
  theme: {
    extend: {
        colors: {
            // The Words - Medium Black
            medium_black: 'rgb(38, 38, 38)',

            // The Canvas - White,
            white: 'rgb(255, 255, 255)',

            // The Highlights - Moonstone
            highlight: 'rgb(94, 1, 191)',

            //
            // Secondary Colors
            //

            // Gin
            gin: 'rgb(230, 2, 233)',

            // Iceberg
            iceberg: 'rgb(212, 7, 240)',

            // Nevada
            nevada: 'rgb(112, 1, 117)',

            // Dark Gunmetal
            dark_gunmetal: 'rgb(26, 5, 53)',


            // Lightness

            'white-1': 'rgba(255, 255, 255, 0.1)',
            'white-2': 'rgba(255, 255, 255, 0.2)',
            'white-3': 'rgba(255, 255, 255, 0.3)',
            'white-4': 'rgba(255, 255, 255, 0.4)',
            'white-5': 'rgba(255, 255, 255, 0.5)',
            'white-6': 'rgba(255, 255, 255, 0.6)',
            'white-7': 'rgba(255, 255, 255, 0.7)',
            'white-8': 'rgba(255, 255, 255, 0.8)',
            'white-9': 'rgba(255, 255, 255, 0.9)',

            'black-1': 'rgba(0, 0, 0, 0.1)',
            'black-7': 'rgba(0, 0, 0, 0.7)',
            'black-9': 'rgba(0, 0, 0, 0.9)'

        },
        fontFamily: {
            primary: 'raleway, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"',
            secondary: 'adelle, Georgia, Cambria, "Times New Roman", Times, seri',
        },
        letterSpacing: {
            wide: '0.3em',
            wider: '0.4em',
            widest: '0.5em',
        },
        height: {
            '1/2-screen': '50vh',
            'full-screen': '100vh'
        },
        minHeight: {
            '3/4-screen': '75vh',
        },
        spacing: {
            '16/9': '56.25%'
        },
        inset: {
            '1/2': '50%',
        },
        zIndex: {
            'header': 1000,
            'angle-separator': -100,
        }
    }
  },
  variants: {},
  plugins: []
}