Enable themes by media query

[silveltman]

Being able to enable a theme by mediaquery would allow for automatic responsive design, like font-sizes and spacing. My personal use-case would be as follows:

defaultTheme: {
  fontSize: {
    'xs': '14px',
    'sm': '16px',
    'md': '18px',
    'lg': '24px',
    'xl': '30px',
    '2xl': '36px',
  },
  spacing: {
    sm: '3px',
    md: '6px',
    lg: '12px',
    xl: '18px',
    '2xl': '24px',
    '3xl': '36px',
    '4xl': '48px',
    '5xl': '96px',
    '6xl': '192px',
  }
},
large: {
  spacing: {
    sm: '4px',
    md: '8px',
    lg: '16px',
    xl: '24px',
    '2xl': '32px',
    '3xl': '48px',
    '4xl': '64px',
    '5xl': '128px',
    '6xl': '256px',
  },
    fontSize: {
    'xs': '16px',
    'sm': '18px',
    'md': '20px',
    'lg': '26px',
    'xl': '36px',
    '2xl': '60px',
  },
}

This would really allow us to do a complete theme config, all from without this awesome plugin :)

[jenmak-tangelo]

@silveltman Have you found any work arounds for this? I'm trying to implement responsive type classes like:
text-h1 md:text-h1mobile

[silveltman]

@jenmak-tangelo Yes, actually a pretty nice one! Check below.

[silveltman]

My workaround which actually works pretty nice: Create a tailwind plugin with all kinds of default styles.

/* eslint-disable @typescript-eslint/no-var-requires */
const plugin = require('tailwindcss/plugin')

module.exports = plugin(
	function ({ addBase, theme }) {
		addBase({
			':root': {
				'--text-xs': '12px',
				'--text-sm': '14px',
				'--text-base': '16px',
				'--text-lg': '18px',
				'--text-xl': '24px',
				'--text-2xl': '30px',
				'--text-3xl': '36px',

				'--space-xs': '3px',
				'--space-sm': '6px',
				'--space-md': '12px',
				'--space-lg': '18px',
				'--space-xl': '24px',
				'--space-2xl': '36px',
				'--space-3xl': '48px',
				'--space-4xl': '96px',
				'--space-5xl': '192px',
			},
			'@screen sm': {
				':root': {
					'--text-xs': '14px',
					'--text-sm': '16px',
					'--text-base': '18px',
					'--text-lg': '20px',
					'--text-xl': '26px',
					'--text-2xl': '36px',
					'--text-3xl': '60px',

					'--space-xs': '4px',
					'--space-sm': '8px',
					'--space-md': '16px',
					'--space-lg': '24px',
					'--space-xl': '32px',
					'--space-2xl': '48px',
					'--space-3xl': '64px',
					'--space-4xl': '128px',
					'--space-5xl': '256px',
				}
			},
			'body,html': {
				fontFamily: theme('fontFamily.base'),
				lineHeight: theme('lineHeight.base'),
				color: theme('colors.content.200'),
			},
			body: {
				fontSize: theme('fontSize.base'),
			},
			'h1, h2, h3': {
				fontFamily: theme('fontFamily.heading'),
				fontWeight: theme('fontWeight.heading'),
				lineHeight: theme('lineHeight.heading'),
				color: theme('colors.content.100'),
			},
			'h4, h5, h6': {
				fontFamily: theme('fontFamily.subheading'),
				fontWeight: theme('fontWeight.subheading'),
				lineHeight: theme('lineHeight.subheading'),
				color: theme('colors.content.100'),
			},
			h1: {
				fontSize: theme('fontSize.3xl'),
			},
			h2: {
				fontSize: theme('fontSize.2xl'),
			},
			h3: {
				fontSize: theme('fontSize.xl'),
			},
			h4: {
				fontSize: theme('fontSize.lg'),
			},
			h5: {
				fontSize: theme('fontSize.md'),
			},
			h6: {
				fontSize: theme('fontSize.sm'),
			},
		})
	},
	{
		corePlugins: {
			aspectRatio: false,
			container: false
		},
		theme: {
			// Font size
			fontSize: {
				'xs': 'var(--text-xs)',
				'sm': 'var(--text-sm)',
				'base': 'var(--text-base)',
				'lg': 'var(--text-lg)',
				'xl': 'var(--text-xl)',
				'2xl': 'var(--text-2xl)',
				'3xl': 'var(--text-3xl)',
			},
			extend: {
				// Spacing
				spacing: {
					xs: 'var(--space-xs)',
					sm: 'var(--space-sm)',
					md: 'var(--space-md)',
					lg: 'var(--space-lg)',
					xl: 'var(--space-xl)',
					'2xl': 'var(--space-2xl)',
					'3xl': 'var(--space-3xl)',
					'4xl': 'var(--space-4xl)',
					'5xl': 'var(--space-5xl)'
				},
				colors: {
					content: {
						100: 'var(--content-100)',
						200: 'var(--content-200)',
						300: 'var(--content-300)',
					},
				}
			}
		},
		daisyui: {
			styled: false,
			themes: false,
			base: false,
			utils: false,
			darkTheme: false,
		},
	}
)

[RyanClementsHax]

This is definitely something I want to support. I'm currently working on something else and will get to it after. I'm also open to contributions. I set up stack blitz support to help with that but anyone who wants to contribute can lmk if there are any problems

[RyanClementsHax]

As specified in another comment, I definitely want to support this case. I plan on making this my next deliverable for this plugin.

[RyanClementsHax]

I released this in the most recent version of the plugin :)