tailwind.config.js

const { scopedPreflightStyles } = require('tailwindcss-scoped-preflight');

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ['./src/**/*.{js,jsx,ts,tsx}'],
  theme: {
    screens: {
      sm: '600px',
      md: '728px',
      lg: '984px',
      xl: '1240px',
      '2xl': '1240px',
    },
    extend: {
      colors: {
        gray: {
          25: '#f5f7f7',
          50: '#eff1f3',
          100: '#dfe3e7',
          200: '#ced1da',
          300: '#bdc2cc',
          400: '#9da1b1',
          500: '#72758b',
          600: '#606478',
          700: '#4d4f5f',
          800: '#2e2f3c',
          850: '#1f1f29',
          900: '#15151d',
        },
        blue: {
          50: '#e6f2fe',
          100: '#cee6fa',
          200: '#aed5fa',
          300: '#90c7fc',
          400: '#63a3fc',
          500: '#0f6ee5',
          600: '#005cde',
          700: '#2949a5',
          800: '#19296e',
          850: '#102157',
          900: '#0c1238',
          950: '#000622',
        },
        pink: {
          50: '#ffeafe',
          100: '#fdd7fd',
          200: '#fbbdf8',
          300: '#fca5ef',
          400: '#f571d3',
          500: '#cf249b',
          600: '#bd0c8b',
          700: '#95146b',
          800: '#5d0843',
          900: '#310121',
        },
        orange: {
          50: '#ffeed3',
          100: '#ffdeae',
          200: '#ffc77a',
          300: '#ffb255',
          400: '#f18622',
          500: '#c14f0f',
          600: '#af4108',
          700: '#8a3500',
          800: '#561e00',
          900: '#2c0c00',
        },
        green: {
          50: '#e2f7d8',
          100: '#c9edbc',
          200: '#a8df97',
          300: '#8ad47b',
          400: '#54b559',
          500: '#29833b',
          600: '#0f7528',
          700: '#265a2f',
          800: '#14371c',
          900: '#071a0c',
        },
        purple: {
          50: '#f9ecfe',
          100: '#edddfb',
          200: '#dac9f7',
          300: '#cfb7f6',
          400: '#b092ee',
          500: '#8355e5',
          600: '#7245dc',
          700: '#5c31b9',
          800: '#341c79',
          900: '#180b3f',
        },
        teal: {
          50: '#e1f4f6',
          100: '#c3eaee',
          200: '#99dce7',
          300: '#86cdd9',
          400: '#48afc2',
          500: '#227c93',
          600: '#166d8b',
          700: '#1c5572',
          800: '#103348',
          900: '#061724',
        },
      },
    },
  },
  corePlugins: { preflight: false },
  plugins: [
    scopedPreflightStyles({
      cssSelector: '.twp', // or .tailwind-preflight or even [data-twp=true] - any valid CSS selector of your choice
      mode: 'matched only', // it's the default
    }),
  ],
};