ShowEasyFrontEnd/FrontEnd/tailwind.config.js

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./components/**/*.{js,vue,ts}",
    "./layouts/**/*.vue",
    "./pages/**/*.vue",
    "./pages/*.vue",
    "./plugins/**/*.{js,ts}",
    "./nuxt.config.{js,ts}",
  ],
  
  corePlugins: {
    preflight: false,
    textOpacity: false
  },
  //類名前綴，使用class必須在前面加這個
  prefix: "tw-",
  important: true,
  theme: {
    extend: {
      colors: {
        transparent: "transparent",
        primary: {
          1: "#F48800",
          2: "#FAAE69",
          3: "#FFF6EE",
          4: "#f5cda8",
          default: "#F48800",
          bright: "#FFB70A",
          light: "#FAAE69",
          pastel: "#FBD480",
          pale: "#FFF6EE",
        },
        secondary: {
          default: "#7997FF",
          dark: "#5F7FEF",
          light: "#A0B5FF",
          pale: "#F4F7FF",
        },
        complementary: {
          1: "#7997FF",
          2: "#F4B927",
          3: "#F4F7FF",
        },
        neutrals: {
          0: "#F8F8F8",
          100: "#F1F1F1",
          200: "#E5E5E5",
          300: "#CECECE",
          400: "#B5B5B5",
          500: "#9C9C9C",
          600: "#757575",
          700: "#696969",
          800: "#504F4F",
          900: "#343434",
        },
        base: {
          primary: "#232323",
          secondary: "#504F4F",
          tertiary: "#9C9C9C",
          hint: "#B5B5B5",
          disable: "#CECECE",
        },
        error: {
          default: "#EF5A5A",
          background: "#FFF7F4",
        },
        warning: {
          default: "#FFB70A",
          background: "#FFFAEE",
        },
        success: {
          default: "#2DC695",
          background: "#F1FFFB",
        },
        hint: "#504F4F",
        white: "#FEFEFE",
        black: "#232323",
      },
    },
    screens: {
      md: "768px",
      lg: "1024px",
      xl: "1366px",
    },
  },
  variants: {},
  plugins: [
    require("@tailwindcss/typography"),
    require("@tailwindcss/line-clamp"),
  ],
};