tailwind.config.js

/** @type {import('tailwindcss').Config} */
module.exports = {
  mode: "jit",
  content: ["./src/**/*.{js,ts,jsx,tsx}"],
  darkMode: "class",
  theme: {
    extend: {
      height: {
        screen: ["100vh", "100dvh"],
      },
      minWidth: {
        48: "48rem",
      },
      backgroundImage:{
        strongBg: "linear-gradient(transparent 60%, #ff6 60%)",
        strongBgDark: "linear-gradient(#ff6 100%, #ff6 100%)",
      },
      fontSize: {
        contentH2: "clamp(1.25rem, 1.159rem + 0.45vw, 1.5rem)",
        contentH3: "clamp(1.125rem, 1.08rem + 0.23vw, 1.25rem)",
        contentH4: "clamp(1rem, 0.925rem + 0.4vw, 1.125rem)",
        contentP: "clamp(0.938rem, 0.9rem + 0.2vw, 1rem)",
      },
      colors: {
        "nav01-blue-t": "#48C6EF",
        "nav01-blue-v": "#97aeed",
        "nav01-blue-b": "#beccff",
        "nav01-blue-t-dark": "#2491b3",
        "nav01-blue-v-dark": "#465c99",
        "nav01-blue-b-dark": "#1e2f6b",
        "nav02-blue-t": "#4FACFE",
        "nav02-blue-v": "#6ac3ff",
        "nav02-blue-b": "#00F2FE",
        "nav02-blue-t-dark": "#004989",
        "nav02-blue-v-dark": "#2748a6",
        "nav02-blue-b-dark": "#00747a",
        "nav03-blue-t": "#89F7FE",
        "nav03-blue-v": "#87c8f5",
        "nav03-blue-b": "#66A6FF",
        "nav03-blue-t-dark": "#245154",
        "nav03-blue-v-dark": "#24587b",
        "nav03-blue-b-dark": "#1051ab",
        "nav04-blue-t": "#A1C4FD",
        "nav04-blue-v": "#a0c5ff",
        "nav04-blue-b": "#C2E9FB",
        "nav04-blue-t-dark": "#042965",
        "nav04-blue-v-dark": "#1a4992",
        "nav04-blue-b-dark": "#3c7189",
        "post-bg-t": "#a3d5ff",
        "post-bg-b": "#ccfbff",
        "post-bg-t-dark": "#003867",
        "post-bg-b-dark": "#00454b",
        "git-icon-t": "#000",
        "git-icon-b": "#434343",
        "code-icon-t": "#485563",
        "code-icon-b": "#29323c",
        "twitter-icon-t": "#00f2fe",
        "twitter-icon-b": "#4facfe",
        "twitter-icon-t-dark": "#00b5be",
        "twitter-icon-b-dark": "#4facfe",
        "instagram-icon-t": "#d57eeb",
        "instagram-icon-b": "#fccb90",
        "instagram-icon-t-dark": "#d57eeb",
        "instagram-icon-b-dark": "#fda234",
        "subCategory-bg-t-dark": "#003e66",
        "subCategory-bg-l-dark": "#1d4a90",
      },
      screens: {
        xl: [{ min: "1000px", max: "1400px" }],
        lg: { max: "1000px" },
        md: { max: "768px" },
        sm: { max: "640px" },
      },
    },
  },
  plugins: [require("@tailwindcss/typography")],
  important: true,
};