@cenguidanos/tailwindcss-config

Install

#yarn
yarn add @cenguidanos/tailwindcss-config

#npm
npm install @cenguidanos/tailwindcss-config

Use

const { tailwindcssConfig } = require('@cenguidanos/tailwindcss-config');

// previously imported in your styles
const config = {
  fonts: {
    sans: ['Montserrat'],
    serif: ['Storybook'],
    mono: ['Consolas'],
  },
  plugins: [require('tailwindcss/typography')],
  purge: {},
};

const tailwind = tailwindcssConfig(config);

module.exports = tailwind;

/**
 * Create webpack plugin instance of tailwindcss
 * @param {TailwindcssConfig} config
 */
export function tailwindcssWebpack(config: TailwindcssConfig): any {
  return {
    test: /\.scss$/,
    loader: 'postcss-loader',
    options: {
      ident: 'postcss',
      syntax: 'postcss-scss',
      plugins: () => [
        require('tailwindcss')(tailwindcssConfig(config)),
        require('autoprefixer'),
      ],
    },
  };
}

/**
 *  Creates a Tailwindcss config with params
 * @param {TailwindcssConfig} config
 * @returns Custom tailwind.config object
 */
export function tailwindcssConfig(
  config: TailwindcssConfig = defaultConfig
): any {
  return {
    ...config.purge,
    future: {
      removeDeprecatedGapUtilities: true,
      purgeLayersByDefault: true,
    },
    theme: {
      extend: {
        screens: {
          sm: '770px',
          md: '981px',
          lg: '1200px',
          xl: '1400px',
          '2xl': '1630px',
        },
        colors: {
          theme: {
            primary: 'var(--primary)',
            secondary: 'var(--secondary)',
            accent: 'var(--accent)',
            border: 'var(--border)',
            background: 'var(--bg)',
            text: 'var(--text)',
            success: 'var(--success)',
            error: 'var(--error)',
          },
        },
        spacing: {
          '69': '17rem',
          '72': '18rem',
          '80': '20rem',
          '86': '21rem',
          '94': '22rem',
          '108': '28rem',
          '116': '32rem',
          '128': '36rem',
          '256': '44rem',
          '512': '60rem',
        },
        borderRadius: {
          xl: '1rem',
          '2xl': '2rem',
        },
        fontFamily: config.fonts,
        fontSize: {
          '7xl': '5rem',
          '8xl': '6rem',
          '9xl': '7rem',
          '10xl': '8rem',
        },
        boxShadow: {
          '3xl': '0 40px 75px -20px rgba(0, 0, 0, 0.34)',
          '4xl': '0 65px 100px -32px rgba(0, 0, 0, 0.5)',
          '5xl': '0 90px 130px -45px rgba(0, 0, 0, 0.8)',
          'material-sm':
            '0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24)',
          'material-md':
            '0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23)',
          'material-lg':
            '0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23)',
          'material-xl':
            '0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22)',
          'material-2xl':
            '0 19px 38px rgba(0,0,0,0.30), 0 15px 12px rgba(0,0,0,0.22)',
          'inner-2': 'inset 2px 4px 6px 4px rgba(0, 0, 0, 0.08)',
          'inner-3': 'inset 4px 6px 8px 6px rgba(0, 0, 0, 0.1)',
          'inner-4': 'inset 6px 8px 10px 8px rgba(0, 0, 0, 0.12)',
          'inner-5': 'inset 8px 10px 12px 10px rgba(0, 0, 0, 0.14)',
          'inner-6': 'inset 10px 10px 10px 10px rgba(0, 0, 0, 0.14)',
          'inner-7': 'inset 12px 12px 12px 12px rgba(0, 0, 0, 0.16)',
        },
        opacity: {
          '80': '0.8',
          '90': '0.95',
        },
        animation: {
          'gradient-x': 'gradient-x 15s ease infinite',
          'gradient-y': 'gradient-y 15s ease infinite',
          'gradient-xy': 'gradient-xy 15s ease infinite',
        },
        keyframes: {
          'gradient-y': {
            '0%, 100%': {
              'background-size': '400% 400%',
              'background-position': 'center top',
            },
            '50%': {
              'background-size': '200% 200%',
              'background-position': 'center center',
            },
          },
          'gradient-x': {
            '0%, 100%': {
              'background-size': '200% 200%',
              'background-position': 'left center',
            },
            '50%': {
              'background-size': '200% 200%',
              'background-position': 'right center',
            },
          },
          'gradient-xy': {
            '0%, 100%': {
              'background-size': '400% 400%',
              'background-position': 'left center',
            },
            '50%': {
              'background-size': '200% 200%',
              'background-position': 'right center',
            },
          },
        },
        transitionTimingFunction: {
          material: 'cubic-bezier(.25,.8,.25,1)',
        },
      },
    },
    plugins: config.plugins ? [...config.plugins] : [],
  };
}