くらげになりたい。

くらげのようにふわふわ生きたい日曜プログラマなブログ。趣味の備忘録です。

Tailwind

Nuxt BridgeにTailwindCSSを入れる

Nuxt BridgeのアプリにNuxt Tailwindを入れようとしたら、 Bridgeはサポートされてないっぽかった。。 なので、Tailwindを追加できるようにしたときの備忘録(*´ω`*) インストール Tailwind側のドキュメントを参考にインストール Install Tailwind CSS with …

Nuxt3でpages配下の特定ディレクトリをルートから除外する(`pages:extend` hook)

Next.js関連のこのツイートを見て、 Nuxtでもやりたいなと思ったときにいろいろ調べてみたときの備忘録(*´ω`*) 最近、ディレクトリをカスタマイズするのが便利なのでは? と思っていろいろ試行錯誤中(*´ω`*) components のディレクトリ構成のベストは?Nex…

Element Plusのカスタマイズで使えるCSS変数を調べてみた

TailwindとDaisyUIで試していたけど、 全コンポーネントを作るのは大変なので、Element+の活用を考えてる。 どうやってテーマをカスタマイズするのかなと思ったので、 いろいろ調べてみたときの備忘録(*´ω`*) Element Plusの設定 テーマのカスタマイズにつ…

tailwind/daisyUIのカスタマイズ

tailwindとdaisyUIを使いはじめて、 色やサイズをカスタマイズしたいなと思ったら、いろいろできた(*´ω`*) Tailwind Themeのカスタマイズ Configuration - Tailwind CSS // tailwind.config.js module.exports = { theme: { // テーマの設定 // デフォルト…

nuxt-tailwindでも`@layer utilities`を使いたい

Tailwindでは、カスタムCSSを@applyやlg:などでも使えるように、 @layer utilitiesなどを使って設定が必要。 @tailwind base; @tailwind components; @tailwind utilities; @layer components { .select2-dropdown { @apply rounded-b-lg shadow-md; } } @la…

Nuxt2+Buefy環境にTailwind3+nuxt-tailwindを導入する

Nuxt2+Buefyで開発していたけど、BuefyがVue3をサポートしないっぽい。。 なので、移行先としてTailsind CSSを考えている。 いきなり全部の移行は難しいので、BuefyとTailwind3が同居できる環境を整える。 Nuxt3では試してみたけど、Nuxt2+Buefyだとちょっと…

Nuxt3 x Tailwindでの立ち上げを楽にする(daisyUI/Headless UI)

いままでNuxt x Buefy(Bulma)で開発をしていたけど、 いろんなつらみが出てきた。。 なので、Nuxt3 x Tailwindでいい感じにできないか、 調査してみたときの備忘録。 いろんなつらみ 用意されているもの以外のカスタマイズがつらい Bulmaとnuxt/contentsなど…

TailwindCSSに入門してみた

ずっとBulmaというかBuefyを使っていたけど、 Bulmaとnuxt/content(の中のPrismJS)の相性が悪い。。 ・BulmaとNuxt/Content(というかPrism.js)の相性が結構辛い - Crieit 今はがんばっているけど、がんばらないでいいように、別のCSSフレームワークを検討中…