musclog-app/tailwind.config.js at main · blopa/musclog-app · 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
const { darkTheme } = require('./theme');

/**
 * Tailwind Configuration for NativeWind
 *
 * NOTE: NativeWind compiles styles at build time, so Tailwind classes cannot
 * dynamically switch between themes. For dynamic theme support:
 *
 * 1. Use inline styles with the theme object from useThemeContext():
 *    const { theme } = useThemeContext();
 *    <View style={{ backgroundColor: theme.colors.background.primary }} />
 *
 * 2. Or use Tailwind classes for static elements:
 *    <View className="bg-bg-primary" />
 *
 * This config uses dark theme colors for Tailwind classes as the default.
 */

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ['./App.{js,ts,tsx}', './app/**/*.{js,ts,tsx}', './components/**/*.{js,ts,tsx}'],
  darkMode: 'class',
  presets: [require('nativewind/preset')],
  theme: {
    extend: {
      animation: {
        'spin-slow': 'spin-slow 2s linear infinite',
      },
      keyframes: {
        'spin-slow': {
          from: { transform: 'rotate(0deg)' },
          to: { transform: 'rotate(360deg)' },
        },
      },
      colors: {
        // Background colors
        bg: {
          primary: darkTheme.colors.background.primary,
          secondary: darkTheme.colors.background.secondary,
          tertiary: darkTheme.colors.background.tertiary,
          card: darkTheme.colors.background.card,
          cardElevated: darkTheme.colors.background.cardElevated,
          cardDark: darkTheme.colors.background.secondaryDark,
          navBar: darkTheme.colors.background.secondary,
          navActive: darkTheme.colors.background.secondaryDark,
          screen: darkTheme.colors.background.primary,
          overlay: darkTheme.colors.background.overlay,
          filterTab: darkTheme.colors.background.filterTab,
        },
        // Text colors
        text: {
          primary: darkTheme.colors.text.primary,
          secondary: darkTheme.colors.text.secondary,
          tertiary: darkTheme.colors.text.tertiary,
          muted: darkTheme.colors.text.muted,
          accent: darkTheme.colors.text.accent,
          accentLight: darkTheme.colors.text.accentLight,
          black: darkTheme.colors.text.black,
        },
        // Accent colors
        accent: {
          primary: darkTheme.colors.accent.primary,
          secondary: darkTheme.colors.accent.secondary,
          tertiary: darkTheme.colors.accent.tertiary,
        },
        // Border colors
        border: {
          default: darkTheme.colors.border.default,
          light: darkTheme.colors.border.light,
          dark: darkTheme.colors.border.dark,
          accent: darkTheme.colors.border.accent,
          dashed: darkTheme.colors.border.dashed,
        },
      },
    },
  },
  plugins: [],
};