bibata/tailwind.config.js at main · ful1e5/bibata · 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
const plugin = require('tailwindcss/plugin');

/** @type {import('tailwindcss').Config} */
module.exports = {
  future: {
    hoverOnlyWhenSupported: true
  },
  content: [
    './app/**/*.{js,ts,jsx,tsx,mdx}',
    './pages/**/*.{js,ts,jsx,tsx,mdx}',
    './components/**/*.{js,ts,jsx,tsx,mdx}',

    // Or if using `src` directory:
    './src/**/*.{js,ts,jsx,tsx,mdx}'
  ],
  darkMode: 'class',
  theme: {
    extend: {
      fontFamily: {
        sans: ['var(--font-geist-sans)'],
        mono: ['var(--font-geist-mono)']
      },
      backgroundImage: {
        'gradient-radial': 'radial-gradient(var(--tw-gradient-stops))'
      },
      animation: {
        marquee: 'marquee 60s linear infinite',
        marquee2: 'marquee2 60s linear infinite',
        'text-slide': 'text-slide 8s cubic-bezier(0.83, 0, 0.17, 1) infinite',
        gradient: 'gradient 10s linear infinite',
        float1: 'float 6s linear infinite',
        float2: 'float 7s linear infinite',
        float3: 'float 8s linear infinite',
        float4: 'float 9s linear infinite'
      },
      keyframes: {
        float: {
          '0%': { transform: 'translateY(0%)' },
          '33%': { transform: 'translateY(9%)' },
          '66%': { transform: 'translateY(2%)' },
          '100%': { transform: 'translateY(0%)' }
        },
        marquee: {
          '0%': { transform: 'translateX(0%)' },
          '100%': { transform: 'translateX(-100%)' }
        },
        marquee2: {
          '0%': { transform: 'translateX(100%)' },
          '100%': { transform: 'translateX(0%)' }
        },
        'text-slide': {
          '0%, 26.66%': {
            transform: 'translateY(0%)'
          },
          '33.33%, 60%': {
            transform: 'translateY(-25%)'
          },
          '66.66%, 93.33%': {
            transform: 'translateY(-50%)'
          },
          '100%': {
            transform: 'translateY(-75%)'
          }
        },
        gradient: {
          to: { 'background-position': '200% center' }
        }
      }
    }
  },
  plugins: [
    plugin(function ({ addVariant, e, postcss }) {
      addVariant('firefox', ({ container, separator }) => {
        const isFirefoxRule = postcss.atRule({
          name: '-moz-document',
          params: 'url-prefix()'
        });
        isFirefoxRule.append(container.nodes);
        container.append(isFirefoxRule);
        isFirefoxRule.walkRules((rule) => {
          rule.selector = `.${e(
            `firefox${separator}${rule.selector.slice(1)}`
          )}`;
        });
      });
    })
  ]
};