tailwind.config.ts 1.3 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152
  1. import forms from "@tailwindcss/forms";
  2. import type { Config } from "tailwindcss";
  3. import tailwindPlugin from "tailwindcss/plugin";
  4. import animate from "tailwindcss-animate";
  5. import reactAria from "tailwindcss-react-aria-components";
  6. const tailwindConfig = {
  7. darkMode: "class",
  8. content: ["src/components/**/*.{ts,tsx}", "src/markdown-components.tsx"],
  9. plugins: [
  10. forms,
  11. animate,
  12. reactAria,
  13. tailwindPlugin((plugin) => {
  14. plugin.addVariant("search-cancel", "&::-webkit-search-cancel-button");
  15. plugin.addVariant("search-decoration", "&::-webkit-search-decoration");
  16. }),
  17. ],
  18. theme: {
  19. extend: {
  20. backgroundImage: {
  21. "gradient-radial": "radial-gradient(var(--tw-gradient-stops))",
  22. },
  23. fontFamily: {
  24. sans: ["var(--font-sans)"],
  25. mono: ["var(--font-mono)"],
  26. },
  27. colors: {
  28. pythpurple: {
  29. 100: "#E6DAFE",
  30. 400: "#BB86FC",
  31. 600: "#6200EE",
  32. 800: "#100E21",
  33. 900: "#131223",
  34. 950: "#0C0B1A",
  35. },
  36. },
  37. height: {
  38. header: "var(--header-height)",
  39. },
  40. spacing: {
  41. "header-height": "var(--header-height)",
  42. },
  43. screens: {
  44. xs: "412px",
  45. "3xl": "2560px",
  46. },
  47. },
  48. },
  49. } satisfies Config;
  50. export default tailwindConfig;