0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

UnoCSS: [暫定対処方法] UnoCSSを適用したら、デザインの横幅いっぱいが出来なくなった場合

Posted at

UnoCSSの公式やGitHubを見ても元々メディアクエリのブレークポイントによって、max-widthが設定されるなんて書いてないので、一時的なものか私の設定(注意してみて見つからなかったのですが)かもしれません

一応、誰かの参考になればとめも

環境

M1 Macbook Pro
React
TypeScript
UnoCSS 0.62.2

経緯

通常のCSSでまず作って、横幅いっぱいのデザインだったものが、UnoCSSを導入して、まだCSSを移行していない状態で、横幅いっぱいにならなくなった。
w-fullw-screenも効かず

なにやらメディアクエリで max-widthが設定されている....???
(画面はUdemyの講座のです)
CleanShot 2024-09-06 at 16.48.03.png

対処法

とりあえず横幅いっぱいにしたいdiv要素は「container」てクラス名を付けてるので、

uno.config.ts
import {
  defineConfig,
  presetAttributify,
  presetUno,
  transformerAttributifyJsx,
} from "unocss";

export default defineConfig({
+  shortcuts: {
+    container: "w-full",
+  },
  presets: [presetAttributify(), presetUno()],
  transformers: [transformerAttributifyJsx()],
});

で横幅いっぱいになりました。

適用後

CleanShot 2024-09-06 at 16.53.04.png

なんでしょうね。しばらくしたら直ってるかもしれません。ちょっとよく分からないです。

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?