Define your media at-rules in the media config. You can add as many as you need.
export const styleConfig = {
media: {
sm: '(min-width: 600px)',
md: '(min-width: 840px)',
lg: '(min-width: 1200px)',
xl: '(min-width: 1600px)',
},
} satisfies StyleConfig;function Button() {
return (
<button
css={{
padding: 4,
"@sm": {
padding: 8,
}
}}
/>
);
}.button {
padding: 4px;
}
@media (min-width: 600px) {
.button {
padding: 8px;
}
}Weave CSS comes with a set of recommended media queries that you can use. You may extend or replace parts of it using object spread syntax, or you can define your own.
import { RECOMMENDED_MEDIA } from "@hypergood/css/presets";
const styleConfig = {
media: {
...RECOMMENDED_MEDIA,
sm: "(min-width: 600px)",
},
};