RAWeb/tailwind.config.js at master · WedgeSparda/RAWeb · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
/**
 * Main Application Tailwind Configuration (v3)
 *
 * This config is for the main Laravel application only.
 * The Filament admin panel uses its own separate Tailwind v4 build pipeline.
 * See resources/filament/ for Filament-specific config.
 *
 * @type {import('tailwindcss').Config}
 */
module.exports = {
  content: [
    './app/Helpers/render/*.php',
    './app/Helpers/util/*.php',
    './public/*.php',
    './resources/js/**/*.ts',
    './resources/js/**/*.tsx',
    './resources/views/**/*.blade.php',
    './storage/framework/views/*.php',
    './vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php',
  ],

  blocklist: [
    /** This causes localization issues. */
    'capitalize',
  ],

  corePlugins: {
    // turn off preflight (reset/normalize)
    // https://tailwindcss.com/docs/preflight#disabling-preflight
    // preflight: false,
  },

  theme: {
    container: {
      center: true,
    },

    extend: {
      colors: {
        bg: 'var(--bg-color)',
        'box-bg': 'var(--box-bg-color)',
        'box-shadow': 'var(--box-shadow-color)',
        embed: 'var(--embed-color)',
        'embed-highlight': 'var(--embed-highlight-color)',
        heading: 'var(--heading-color)',
        link: 'var(--link-color)',
        'link-hover': 'var(--link-hover-color)',
        'menu-link': 'var(--menu-link-color)',
        'menu-link-hover': 'var(--menu-link-hover-color)',
        text: 'var(--text-color)',
        'text-danger': 'var(--text-color-danger)',
        'text-muted': 'var(--text-color-muted)',
      },

      animation: {
        'accordion-down': 'accordion-down 0.2s ease-out',
        'accordion-up': 'accordion-up 0.2s ease-out',
        'fade-in': 'fade-in 100ms ease',
        'collapse-open': 'collapse-open 200ms ease-in-out',
        tilt: 'tilt 10s infinite linear !important',
        shimmer: 'shimmer 3s ease-in-out infinite',
      },
      keyframes: {
        'accordion-down': {
          from: { height: '0' },
          to: { height: 'var(--radix-accordion-content-height)' },
        },

        'accordion-up': {
          from: { height: 'var(--radix-accordion-content-height)' },
          to: { height: '0' },
        },

        'fade-in': {
          '0%': { opacity: 0 },
          '100%': { opacity: 1 },
        },

        'collapse-open': {
          '0%': { opacity: 0, maxHeight: 0, transform: 'translateY(-0.5rem)' },
          '100%': { opacity: 1, maxHeight: 9000, transform: 'translateY(0)' },
        },

        tilt: {
          '0%, 50%, 100%': { transform: 'rotate(0deg)' },
          '25%': { transform: 'rotate(1.5deg)' },
          '75%': { transform: 'rotate(-1.5deg)' },
        },

        shimmer: {
          '0%': { backgroundPosition: '200% 0' },
          '100%': { backgroundPosition: '-200% 0' },
        },
      },
    },

    fontSize: {
      '2xs': '.70rem',
      xs: '.75rem',
      sm: '.875rem',
      base: '1rem',
      lg: '1.125rem',
      xl: '1.25rem',
      '2xl': '1.5rem',
      '3xl': '1.875rem',
      '4xl': '2.25rem',
      '5xl': '3rem',
      '6xl': '4rem',
      '7xl': '5rem',
    },

    screens: {
      sm: '640px',
      md: '768px',
      lg: '1024px',
      xl: '1280px',
      // '2xl': '1536px',
    },
  },

  variants: {
    extend: {
      animation: ['motion-safe'],
    },
  },

  plugins: [
    require('tailwindcss-animate'),
    require('@tailwindcss/forms')({
      // TODO switch to global strategy as soon UI has been consolidated
      strategy: 'class', // only generate classes
    }),
    require('@tailwindcss/typography'),
    require('@tailwindcss/aspect-ratio'),
    require('@tailwindcss/container-queries'),

    // Add support for `light:` and `black:` prefixes to better support light & black mode users.
    // `dark` is considered the default scheme, thus a `dark:` prefix is always implied similar to `xs:`.
    function ({ addVariant }) {
      addVariant('light', [
        '@media (prefers-color-scheme: light) { [data-scheme="system"] & }',
        '[data-scheme="light"] &',
      ]);

      addVariant('black', ['[data-scheme="black"] &']);
    },
  ],
};