初めてのtailwindcss (Vue.js + PurgeCSS) - Qiita
この記事は CSS Advent Calendar 2019 21日目の記事です。 気になってたtailwindcssを、Vue.jsでやってみましたという記事です。 リポジトリはこちら→ https://github.com/hisako135/tailwindcss_vue_demo やったことは以下のような感じです。 Vue.js でのtailwindcssのセットアップ PurgeCSS でのファイル容量の削減 tailwindcssってなんぞ "Bootstrapをゴリゴリいじってカスタマイズしても良いのだが、そこに時間かけるんならCSSフレームワーク使う利点なくない...？ " などと思ったことがある人はいませんか...？ グリッドシステムとForm周りさえあればよくて、他の必要なコンポーネントは自分で作った方が楽だよな、とかゴニョゴニョ...(小声) そこでtailwindc
【WEB開発】Vue.js + TailWind CSS 導入編
執筆に至った経緯 統計を調べた時に世界で流行しているCSSフレームワークという事もあり、日本でもちらほら話題に上がってきているので学んでおいて損はないと感じたからです。 出典：State of CSS 2020 導入環境 【WEB開発】Vue.js開発環境を作ろう 導入編で作ったミニマム環境に導入していきます。 TailWind CSSの紹介だけでなく、Vue.jsの拡張性についても触れていきます。 導入 早速Viteで作成したVue環境にTailWind CSSを導入していきます。 TailWind CSS Vue3に導入ガイド 公式のリファレンスに従ってセットアップしていきます。 TailWind CSSのインストール インストールするものは下記３つ tailwindcss postcss autoprefixer 同時にインストールするコマンドが下記になります
Tailwind CSSの基礎とVue.jsへの導入 | RE:ENGINES
はじめに よく使われるCSSフレームワークの一つであるBootstrapは、フロントエンド開発にRreactやVue.jsが用いられることが多くなった昨今では、あまり使用されなくなってきているようです。代わりに、Tailwind CSSの採用が増えてきているようなので、概要とBootstrapとの違いについてまとめてみようと思います。 Tailwind CSSとは Tailwind CSSはUtility FirstをコンセプトとしたCSSフレームワークです。このコンセプトでは、コンポーネントではなく、utility classを用いてページをデザインしていきます。 utility class utility classを用いた場合とコンポーネントを用いた場合で、どのような違いが有るか、コンポーネント側の例としてBootstrapと比較して説明します。 Bootstrapでボタンを表示する
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
