tailwind.config.js

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./node_modules/flowbite/**/*.js",
    "./components/**/*.{js,vue,ts}",
    "./layouts/**/*.vue",
    "./pages/**/*.vue",
    "./plugins/**/*.{js,ts}",
    "./nuxt.config.{js,ts}",
    "./app.vue",
  ],
  theme: {
    container: {
      // you can configure the container to be centered
      center: true,

      // or have default horizontal padding
      padding: "1rem",

      // default breakpoints but with 40px removed
      screens: {
        sm: "480px",
        md: "768px",
        lg: "976px",
        xl: "1280px",
      },
    },
    extend: {
      fontFamily: {
        sans: ["Inter", "Arial", "sans-serif"],
      },

      colors: {
        violet: {
          DEFAULT: "#4338CA",
          //50: '#EAE9F9',
          50: "#EEF2FF",
          100: "#DBD9F5",
          200: "#BDB9EC",
          300: "#9E99E4",
          400: "#8078DB",
          500: "#6158D3",
          600: "#4338CA",
          700: "#332A9F",
          800: "#251F73",
          900: "#171347",
        },
      },
    },
  },
  plugins: [require("flowbite/plugin"), require("@tailwindcss/line-clamp")],
};