ハウツー: TailwindCSS + Vue3 + Vite を使用してダークモードを切り替える
私は Vite/Vue3 の初心者で、現在コミュニティの知識を総合する必要があるという問題に直面しています。
Vite/Vue3 アプリケーションを作成し、TailwindCSS をインストールしました:
リーリーその後、Tailwind ホームページの指示に従いました。
すべてのテンプレート ファイルのパスを tailwind.config.js ファイルに追加します。
新しく作成した ./src/index.css ファイルを ./src/main.js ファイルにインポートします。
./src/index.css ファイルを作成し、@tailwind ディレクティブ Tailwind レイヤーを各ファイルに追加します。
現在、Vite/Vue3/TailwindCSS アプリを実行しているので、ダーク モードを切り替える機能を追加したいと考えています。
Tailwind のドキュメントには、darkMode: 'class' を tailwind.config.js に追加し、クラス dark を # に切り替えることでアーカイブを実行できると記載されています。 ##<html> タグ。
- 内部
- index.html
- About.vue 内部
.remove() と .add() の代わりに element.classList.toggle() を使用できることはわかっています。しかし、おそらく私のような他の初心者も将来これを見て、手始めに簡単なコードを理解するでしょう。どうかご容赦ください...
このように DOM を操作するのが Vue のやり方ではないことはわかっています。もちろん、自分の目標は正しい方法で達成したいと思っています。
でも、どうすればいいでしょうか?
信じてください、Google で何時間も検索しましたが、これとこれとこの 追加の npm モジュールをインストールせずに機能する解決策は見つかりませんでした。
しかし、私はミニマリスト的なアプローチを望んでいました。私や学習を始めようとしている他の人たちを圧倒しないように、できるだけ依存しないようにしてください。これを背景として、私や他の初心者にとって有効な解決策はありますか? :-)
