tailwind.config.js 1.6 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061
  1. const { iconsPlugin, getIconCollections } = require("@egoist/tailwindcss-icons")
  2. /** @type {import('tailwindcss').Config} */
  3. module.exports = {
  4. content: [
  5. './src/**/*.{html,js,ts,jsx,tsx}',
  6. ],
  7. theme: {
  8. extend: {
  9. colors: {
  10. 'primary': '#4A90C2',
  11. 'primary-dark': '#357ABD',
  12. 'secondary': '#5B9BD5',
  13. 'charter': '#d4af37',
  14. 'charter-light': '#f4d03f',
  15. 'charter-dark': '#1a1a1a',
  16. 'charter-bg': '#2d2d2d',
  17. 'success': '#10B981',
  18. 'warning': '#F59E0B',
  19. 'error': '#EF4444',
  20. 'gray-50': '#F9FAFB',
  21. 'gray-100': '#F3F4F6',
  22. 'gray-200': '#E5E7EB',
  23. 'gray-300': '#D1D5DB',
  24. 'gray-400': '#9CA3AF',
  25. 'gray-500': '#6B7280',
  26. 'gray-600': '#4B5563',
  27. 'gray-700': '#374151',
  28. 'gray-800': '#1F2937',
  29. 'gray-900': '#111827',
  30. },
  31. borderRadius: {
  32. 'card': '20rpx',
  33. 'button': '50rpx',
  34. 'small': '12rpx',
  35. 'medium': '16rpx',
  36. },
  37. boxShadow: {
  38. 'light': '0 2rpx 12rpx rgba(0, 0, 0, 0.08)',
  39. 'medium': '0 4rpx 20rpx rgba(0, 0, 0, 0.12)',
  40. 'heavy': '0 8rpx 32rpx rgba(0, 0, 0, 0.16)',
  41. 'primary': '0 8rpx 24rpx rgba(74, 144, 194, 0.4)',
  42. 'charter': '0 8rpx 24rpx rgba(212, 175, 55, 0.4)',
  43. },
  44. spacing: {
  45. 'card': '32rpx',
  46. 'section': '24rpx',
  47. 'button': '24rpx',
  48. }
  49. },
  50. },
  51. plugins: [
  52. iconsPlugin({
  53. // Select the icon collections you want to use
  54. collections: getIconCollections(["mdi", "lucide", "heroicons", "heroicons-outline", "heroicons-solid"]),
  55. }),
  56. ],
  57. corePlugins: {
  58. preflight: false,
  59. },
  60. }