UnoCSSの公式やGitHubを見ても元々メディアクエリのブレークポイントによって、max-widthが設定されるなんて書いてないので、一時的なものか私の設定(注意してみて見つからなかったのですが)かもしれません
一応、誰かの参考になればとめも
環境
M1 Macbook Pro
React
TypeScript
UnoCSS 0.62.2
経緯
通常のCSSでまず作って、横幅いっぱいのデザインだったものが、UnoCSSを導入して、まだCSSを移行していない状態で、横幅いっぱいにならなくなった。
w-full
、w-screen
も効かず
なにやらメディアクエリで max-width
が設定されている....???
(画面はUdemyの講座のです)
対処法
とりあえず横幅いっぱいにしたいdiv要素は「container」てクラス名を付けてるので、
uno.config.ts
import {
defineConfig,
presetAttributify,
presetUno,
transformerAttributifyJsx,
} from "unocss";
export default defineConfig({
+ shortcuts: {
+ container: "w-full",
+ },
presets: [presetAttributify(), presetUno()],
transformers: [transformerAttributifyJsx()],
});
で横幅いっぱいになりました。
適用後
なんでしょうね。しばらくしたら直ってるかもしれません。ちょっとよく分からないです。