ある日の我が家 ワイ「去年趣味でアプリ作っていたんやが」 ワイ「この頃はあまり見た目に拘ってなかったなぁ」 ワイ「ヤクルトも日本一になったし、この際セルフリメイクしてみよか！」1 Tailwind CSSを使ってみた ワイ「はぇーBootstrapだけじゃなくて」 ワイ「Tailwind CSSってのもあるんか」 ワイ「前回はBootstrapやったし、Tailwind CSSを使ってみるか」 ラジオボタンをどうにかしたい ワイ「ラジオボタンそのまま表示するのもなんか味気ないな・・・」 ワイ「どれどれ・・・ラジオボタンをボタン風に表示させることもできるんか」2 ワイ「これをTailwind CSSでいっちょやってみっか！」 まず通常通りラジオボタンを配置する ワイ「まずは普通にラジオボタンを配置してみよか」 <body> <div> <input type="radio" name="ce
皆さんこんにちは。最近とある事情でTailwind CSSにわりと真剣に向き合わないといけなくなった筆者です。 Tailwind CSSの話題は、Twitterのフロントエンド界隈では定番のトークテーマのひとつです。しかし、筆者の考えを文章にまとめたことは無かったので、このたびブログ記事にすることにしました。 結論筆者が一番みなさんに伝えたいことは、Tailwind CSSは考え無しに採用してよい技術ではなく、採用するには熟慮が必要だということです。とくに、フロントエンドのスターターキット的なプロジェクトの中にTailwind CSSが混ざっていることがありますが、あれはけっこうな罠です。気軽に採用すべきものではありません。 筆者の考えでは、Tailwind CSSの採用を考慮に入れてよいのは次の2つの場合です。 デザインにこだわりがなく、最低限整っていればいい場合。デザイナー不在のプロジ
CommunityGetting StartedInstallationEditor SetupUsing with PreprocessorsOptimizing for ProductionBrowser SupportUpgrade GuideCore ConceptsUtility-First FundamentalsHover, Focus, and Other StatesResponsive DesignDark ModeReusing StylesAdding Custom StylesFunctions & DirectivesCustomizationConfigurationContentThemeScreensColorsSpacingPluginsPresetsBase StylesPreflightLayoutAspect RatioContainerColum
この雑記を書く問題意識は、Tailwind CSSに対して向けられている世の人々の不満が、Tailwind CSSがコミットしていることから外れた、お門違いの期待の押しつけになっているのではないかと感じるところにある。 ライブラリやフレームワーク、道具にはそれが作られた目的があり、果たそうとするコミットメントがある。その圏内において果たされていないコミットメントに対する不満は、それ自体の存在意義にかかわる意味を持つが、しかし利用者が一方的に寄せた期待が果たされないことに対する不満はそうではない。 念押しするまでもないと思うが、これはTailwind CSSに対して不満を向けるべきではないという話ではまったくない。むしろ、その不満の下敷きとなっている Tailwind CSS への期待が Tailwind CSS 自体によってコミットされたものでないとしたら、不満を向けてもしょうがないのでは
Masonryレイアウトとは、画像やカード型コンテンツをレンガ状に敷き詰めて配置するレイアウトです。Pinterestなどで見かける、高さが異なる画像・カードを配置する時によく使用されるテクニックです。 以前はJavaScriptやライブラリを使用したり、トリッキーなCSSで実装していましたが、Tailwind CSSを使用するとウソみたいに簡単に実装できます。 TailwindCSS Masonry Layout by Luca Spezzano 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに Tailwind CSSのみを使用してMasonryレイアウトを実装する方法 終わりに はじめに Masonryレイアウトは、以前は画像ギャラリーに使用されていました。しかし最近では、このレイアウトはユーザーにとって非常に魅力
Webサイトでよく使用されるさまざまなUIコンポーネントとページレイアウトをTailwind CSSで実装したコンポーネント集を紹介します。 Tailwind CSSをこれから始めるという人にも簡単で、デフォルト構成のまま機能し、各UIコンポーネントとページレイアウトはHTMLをコピペするだけで簡単に実装できます。 Preline UI Preline UI -GitHub 他にも、Tailwind CSSで実装されたUIコンポーネントを探している人は下記もご覧ください。 Tailwind CSSで実装されたUIコンポーネント・ページテンプレート、商用プロジェクトで無料のものをまとめました Preline UIの特徴 Preline UIのUIコンポーネントとページレイアウト Preline UIの使い方 Preline UIの特徴 Preline UIは、ユーティリティファーストのTai
この記事は CSS Advent Calendar 2019 21日目の記事です。 気になってたtailwindcssを、Vue.jsでやってみましたという記事です。 リポジトリはこちら→ https://github.com/hisako135/tailwindcss_vue_demo やったことは以下のような感じです。 Vue.js でのtailwindcssのセットアップ PurgeCSS でのファイル容量の削減 tailwindcssってなんぞ "Bootstrapをゴリゴリいじってカスタマイズしても良いのだが、そこに時間かけるんならCSSフレームワーク使う利点なくない...？ " などと思ったことがある人はいませんか...？ グリッドシステムとForm周りさえあればよくて、他の必要なコンポーネントは自分で作った方が楽だよな、とかゴニョゴニョ...(小声) そこでtailwindc
執筆に至った経緯 統計を調べた時に世界で流行しているCSSフレームワークという事もあり、日本でもちらほら話題に上がってきているので学んでおいて損はないと感じたからです。 出典：State of CSS 2020 導入環境 【WEB開発】Vue.js開発環境を作ろう 導入編で作ったミニマム環境に導入していきます。 TailWind CSSの紹介だけでなく、Vue.jsの拡張性についても触れていきます。 導入 早速Viteで作成したVue環境にTailWind CSSを導入していきます。 TailWind CSS Vue3に導入ガイド 公式のリファレンスに従ってセットアップしていきます。 TailWind CSSのインストール インストールするものは下記３つ tailwindcss postcss autoprefixer 同時にインストールするコマンドが下記になります
はじめに よく使われるCSSフレームワークの一つであるBootstrapは、フロントエンド開発にRreactやVue.jsが用いられることが多くなった昨今では、あまり使用されなくなってきているようです。代わりに、Tailwind CSSの採用が増えてきているようなので、概要とBootstrapとの違いについてまとめてみようと思います。 Tailwind CSSとは Tailwind CSSはUtility FirstをコンセプトとしたCSSフレームワークです。このコンセプトでは、コンポーネントではなく、utility classを用いてページをデザインしていきます。 utility class utility classを用いた場合とコンポーネントを用いた場合で、どのような違いが有るか、コンポーネント側の例としてBootstrapと比較して説明します。 Bootstrapでボタンを表示する
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く