@settld/tailwindcss-config/index.js

Shared Tailwind CSS preset for web development projects.

const colors = require('tailwindcss/colors');
const defaultTheme = require('tailwindcss/defaultTheme');

/** @type {import('tailwindcss/tailwind-config').TailwindConfig} */
module.exports = {
  darkMode: 'class',

  corePlugins: {
    aspectRatio: false,
  },

  theme: {
    colors: {
      ...colors,
      primary: colors.blue,
      secondary: colors.indigo,
    },

    borderRadius: {
      ...defaultTheme.borderRadius,
      half: '50%',
      third: '33.3%',
    },

    scale: {
      ...defaultTheme.scale,
      97: '0.97',
    },

    fontFamily: {
      ...defaultTheme.fontFamily,
      brand: ['Barlow', 'sans-serif'],
    },

    screens: {
      xs: '338px',
      sm: '686px',
      md: '1024px',
      lg: '1220px',
    },
  },

  plugins: [
    require('@tailwindcss/aspect-ratio'),
    require('@tailwindcss/forms'),
    require('@tailwindcss/line-clamp'),
    require('@tailwindcss/typography'),

    require('./plugin'),
  ],
};