hover and media

Twigwind provides utilities for hover states and media queries. Use the hover: prefix for hover changes

💡 Tip: Combine hover with other utilities for interactive effects.

Example

<div class="bg-purple p-10 hover:bg-pink">hover me</div>

will be complied into


bg-purple { background-color: #7b2ff7; }            
p-10 { padding: 10px; }
bg-purple:hover { background-color: #ff49db; }

Media Queries

Use the sm:, md:, lg:, and xl: prefixes to apply styles at different screen sizes.

💡 Tip: Combine media queries with other utilities for responsive designs.

Example

<div class="bg-blue p-10 sm:bg-green md:bg-yellow lg:bg-red xl:bg-purple">Resize the window</div>

will be complied into


bg-blue { background-color: #1e90ff; }            
p-10 { padding: 10px; }
@media (min-width: 640px) { .sm\:bg-green { background-color: #32cd32; } }
@media (min-width: 768px) { .md\:bg-yellow { background-color: #ffd700; } }
@media (min-width: 1024px) { .lg\:bg-red { background-color: #ff4500; } }
@media (min-width: 1280px) { .xl\:bg-purple { background-color: #7b2ff7; } }