CSS functions?

First, this is a great plugin, and a great project, thanks.

Is your feature request related to a problem? Please describe. It’s great to have everything in the html: <div class="dark:bg-blue-100"></div>.

Describe the solution you’d like But what would be even better would be to have something that can be used in CSS like the @screen directive:

input {
	@apply bg-gray-300;
}

input:focus {
	@apply bg-white;
}

@theme dark {
	input {
		@apply bg-gray-800;
	}
	input:focus {
		@apply bg-gray-500;
	}
}

Describe alternatives you’ve considered A clear and concise description of any alternative solutions or features you’ve considered.

Additional context Add any other context or screenshots about the feature request here.

[estevanmaito]

I think it’s a good idea to mention that it needs nesting support.

If users don’t want to use nesting, they can do something like:

.theme-dark a {
  @apply text-blue-300;
}

Added to the docs. Thanks!

[laymonage]

I think it’s a good idea to mention that it needs nesting support.

If users don’t want to use nesting, they can do something like:

.theme-dark a {
  @apply text-blue-300;
}