some-tailwind-config

gistfile1.txt

module.exports = {
  content: [
    "./pages/**/*.{js,ts,jsx,tsx}",
    "./components/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {
      fontFamily: {
        sans: ["Lato", "sans-serif"],
      },
      colors: {
        "brand-blue": "#0047CC",
        "brand-blue-light": "#0047CC1A",
        "brand-blue-2": "#ADB6C5",
        "brand-blue-3": "#77869E",
        "brand-gray-1": "#042C5C",
      },
      fontSize: {
        tiny: "0.813rem",
        xxs: [
          "0.6875rem",
          {
            lineHeight: "0.8125rem",
          },
        ],
      },
    },
  },
  plugins: [],
};


2nd

const defaultTheme = require("tailwindcss/defaultTheme");
module.exports = {
    purge:false,
    theme: {
        extend: {
            fontFamily: {
                body: ["'Open Sans'"],
                sans: ["'Open Sans'", ...defaultTheme.fontFamily.sans],
            },
            colors: {
                "brand-100": "#8D2B0B",
                "brand-90": "#B44D12",
                "brand-80": "#CB6E17",
                "brand-70": "#DE911D",
                "brand-60": "#F0B429",
                "brand-50": "#F7C948",
                "brand-40": "#FADB5F",
                "brand-30": "#FCE588",
                "brand-20": "#FFF3C4",
                "brand-10": "#FFFBEA",
                "blue-90": "#035388",
                "blue-80": "#0B69A3",
                "blue-70": "#127FBF",
                "blue-60": "#1992D4",
                //"blue-60": "#2BB0ED",
                "blue-50": "#40C3F7",
                "blue-40": "#5ED0FA",
                "blue-30": "#81DEFD",
                "blue-20": "#B3ECFF",
                "blue-10": "#E3F8FF",
            },

            spacing: {
                "72": "18rem",
                "58": "15rem",
            },
            fontSize: {
                xs: "0.75rem",
                sm: "0.875rem",
                base: "1rem",
                lg: "1.125rem",
                xl: "1.25rem",
                "2xl": "1.5rem",
                "3xl": "1.875rem",
                "4xl": "2.25rem",
                "5xl": "3rem",
                "6xl": "4rem",
                tiny: "0.625rem",
            },
        },
    },
    fontSize: {
        xss: "0.625rem",
    },
    plugins: [require("@tailwindcss/ui")],
};

3rd

const defaultTheme = require("tailwindcss/defaultTheme");

module.exports = {
  purge: [
    "./public/**/*.html",
    "./pages/**/*.js",
    "./pages/**/*.tsx",
    "./components/**/*.js",
  ],
  theme: {
    extend: {
      fontFamily: {
        sans: ["Roboto", ...defaultTheme.fontFamily.sans],
      },
      colors: {
        "brand-gray-1": "#f7f6f4",
        "brand-gray-2": "#e8e7e5",
      },
      spacing: {
        "72": "18rem",
        "58": "15rem",
      },
      fontSize: {
        xs: "0.75rem",
        sm: "0.875rem",
        base: "1rem",
        lg: "1.125rem",
        xl: "1.25rem",
        "2xl": "1.5rem",
        "3xl": "1.875rem",
        "4xl": "2.25rem",
        "5xl": "3rem",
        "6xl": "4rem",
        tiny: "0.625rem",
      },
    },
  },
  variants: {},
  fontSize: {
    xss: "0.625rem",
  },
  plugins: [require("@tailwindcss/ui")],
};

4th

theme: {
    extend: {
      colors: {
        blue: {
          lightest: '#F0F6FF',
          DEFAULT: '#6FC4F6',
        },
        brand: colors.blue,
        purple: {
          DEFAULT: '#869CF9',
        },
        violet: {
          DEFAULT: '#728EFF',
          darker: '#4c4c76',
        },
        red: {
          DEFAULT: '#F11212',
        },
        green: {
          DEFAULT: '#4DC8AF',
        },
        font: {
          lightest: '#B7BCC1',
          light: '#6D7C86',
          DEFAULT: '#222534',
        },
        border: {
          DEFAULT: '#F1F1F2',
          darker: '#B7BCC1',
          darkest: '#2D3032',
        },
        gray: {
          DEFAULT: '#F6F6F8',
          darker: '#6D7C86',
        },
        icon: {
          light: '#AEB5C7',
        },
      },
      fontFamily: {
        sans: ['Gilroy', ...defaultTheme.fontFamily.sans],
      },

        text-violet
        bg-violet-darker

# size 

function px(pixels) {
  return `${pixels / 16}rem`;
}

module.exports = {
  purge: ["./components/**/*.{js,ts,jsx,tsx}", "./pages/**/*.{js,ts,jsx,tsx}"],
  theme: {
    fontSize: {
      xs: px(12),
      sm: px(14),
      base: px(15),
      lg: px(18),
      xl: px(20),
      "2xl": px(24),
      "3xl": px(30),
      "4xl": px(36),
      "5xl": px(48),
      "6xl": px(64),
    },
    extend: {
      screens: {
        xs: "480px",
      },
    },
  },
}