Tailwind CSSを本気でカスタマイズする方法

2024/04/19 128 users 方法

2024-04-19に開催されたBARフロントえんどう #2 「CSS Library / Framework」（サイボウズ）での登壇資料です。 イベント → https://cybozu.connpass.com/event/311066/ 続きを読む

【2024年】React, Tailwind CSSでメルカリクローンサイトを作ろう【入門】

2024/03/23 317 users React 入門

メルカリのクローンサイトを作りながら、React・Tailwind CSSが学べる本です。 続きを読む

Utility-first CSS(Tailwind CSS)が合理的であることの説明と、CSSによるUI開発小史

2024/03/14 148 users CSS styled-components 説明 変遷 目次

目次 CSS小史 SUIT CSS - 命名規約ベースのCSS方法論 styled-components - CSS in JS Tailwind CSS - Utility-first CSS なぜインラインスタイルではダメなのか まとめ タイムライン 参考リンク CSS小史 CSSでアプリのUIを実装するための手法は、これまでいくかの変遷を辿ってきた。 はるか昔、CSSが生まれて間もないこ... 続きを読む

Tailwind CSS を使う時に一緒に入れたいライブラリ

2024/02/04 119 users ライブラリ つの要素 HTML クラス 特性上

Tailwind CSS を使う時に一緒に入れたいライブラリ 2024.02.03 Tailwind CSS を使う上でクラス名をスッキリと書くために一緒に入れたいライブラリを紹介します Tailwind CSS はすべてをユティリティクラスで書くという特性上、HTML にはクラスがたくさん書かれることになります。1 つの要素に対してクラスがたくさん並ん... 続きを読む

Next.js + TypeScript + Tailwind CSS の開発環境をできるだけ丁寧に構築する【2024年】

2024/01/30 376 users TypeScript Next.js プロジェクト 参考 説明

はじめに 最近、Next.js、TypeScript、Tailwind CSSを使って技術ブログを立ち上げました。（まだあまり更新は進んでいませんが…） このプロジェクトを通じて構築した開発環境がわりと快適だったので、誰かの参考になるかもしれないと記事を書いてみることにしました。 できる限りわかりやすく詳細な説明を心がけましたが... 続きを読む

Tailwind CSSでデザインシステムを構築する［前編］ ～「契約」としてのデザインシステム | gihyo.jp

2024/01/25 84 users gihyo.jp ユーティリティファースト 契約 後編 発想

2024年1月26日発売の『Tailwind CSS実践入門』の第9章「ユーティリティファーストでデザインシステムを構築する」の一部を、前後編の2回に分けて掲載します。ユーティリティファーストというTailwind CSSの発想を活かしたデザインシステム構築の最初の一歩をまとめたものです。開発者がデザインルールをTailwind CSSの設... 続きを読む

Vercel、自然言語からUIを生成するサービス「v0」を実験的に公開。Tailwind CSSとShadcn UIをベースに

2023/09/19 69 users Vercel プロンプト ユーザーインターフェイス 生成AI

Next.jsの開発元として知られるVerelは、生成AIに対して自然言語のプロンプトを与えることでWebのユーザーインターフェイスを自動生成してくれるサービス「v0」をプライベートアルファ版として公開しました。 v0のWebサイト。プロンプト入力欄が中央にあり、下には過去の作例が並んでいる v0 by Vercel LabsGenerate UI ... 続きを読む

Next.js, Prisma, GraphQL Code Generator で作るフルスタック Web アプリケーション

2022/09/10 166 users Prisma フルスタック NextAuth.js 構築手法

Next.js, Prisma, GraphQL Code Generator で作るフルスタック Web アプリケーション おもにNext.js、Prisma、GraphQL Code Generatorを用いたWebアプリケーションの構築手法について解説した書籍となります。 上記技術に加えて、以下の技術も採用しています。 ・Tailwind CSS ・NextAuth.js ・Apollo GraphQL ・Prettie... 続きを読む

CSS設計って最近こういう感じだと思うんですけどどうですか

2022/07/29 203 users CSS設計 感じ BEM doc CSS Modules

CSS設計って最近こういう感じだと思うんですけどどうですかという話です。BEM、CSS Modules、CSS in JS、Tailwind CSSとか色々ありますがどういうふうに捉えればよいのだろうという内容でした。 フォローアップ https://paper.dropbox.com/doc/CSS-pXvOHW14FJ4gqJb60mnyI 続きを読む

Tailwind CSSの二面性と、デザインシステムを借りるということ

2022/07/24 101 users デザインシステム お門違い コミットメント 二面性 ライブラリ

この雑記を書く問題意識は、Tailwind CSS に対して向けられている世の人々の不満が、Tailwind CSS がコミットしていることから外れた、お門違いの期待の押しつけになっているのではないかと感じるところにある。 ライブラリやフレームワーク、道具にはそれが作られた目的があり、果たそうとするコミットメントがある。そ... 続きを読む

ウソみたいに簡単！ Tailwind CSSのみを使用してMasonryレイアウトを実装する方法

2022/07/06 63 users Masonryレイアウト Pinterest ウソ CSS

Masonryレイアウトとは、画像やカード型コンテンツをレンガ状に敷き詰めて配置するレイアウトです。Pinterestなどで見かける、高さが異なる画像・カードを配置する時によく使用されるテクニックです。 以前はJavaScriptやライブラリを使用したり、トリッキーなCSSで実装していましたが、Tailwind CSSを使用するとウソみ... 続きを読む

Tailwind CSSの入門に！ コピペで簡単に実装できるUIコンポーネントとページレイアウトのまとめ -Preline UI

2022/06/16 155 users UIコンポーネント コピペ 各UIコンポーネント HTML

Webサイトでよく使用されるさまざまなUIコンポーネントとページレイアウトをTailwind CSSで実装したコンポーネント集を紹介します。 Tailwind CSSをこれから始めるという人にも簡単で、デフォルト構成のまま機能し、各UIコンポーネントとページレイアウトはHTMLをコピペするだけで簡単に実装できます。 Preline UI Preli... 続きを読む

これまでとは異なるCSSフレームワークが登場！ 一貫性のあるUIコンポーネントを簡単に実装できる -Open Props

2022/04/05 189 users CSSフレームワーク UIコンポーネント 一貫性 登場 くら

これまでとは異なるCSSフレームワークが登場しました！ Tailwind CSSのようにユーティリティファーストで、すべての値がCSS変数（カスタムプロパティ）で記述されています。レスポンシブ対応で一貫性のあるUIコンポーネントを簡単に、素早く実装できます。 単独でも他のフレームワークとの併用も可能で、カラーのみグラ... 続きを読む

Tailwind CSS 社内勉強会【まとめ】 - RAKUS Developers Blog | ラクス エンジニアブログ

2022/02/17 116 users コンポーネント指向 ラクス CSS チートシート 背景

背景 スコープ Tailwind CSSとは？ コンポーネント指向とは？ Tailwind CSSのメリット class名を考える必要がない デザインシステムの最低保証 ドキュメント、チートシートの豊富さ Tailwind CSSのデメリット classに多くのコードを書く必要があり、可読性が落ちやすい CSSの理解度がある程度必要 デザインを100%再現し... 続きを読む

Tailwind CSS v3.0 - Tailwind CSS

2021/12/09 54 users

Tailwind CSS v3.0 is here — bringing incredible performance gains, huge workflow improvements, and a seriously ridiculous number of new features. Tailwind CSS v3.0 is here — bringing incredible performance gains, huge workflow improvements, and a seriously ridiculous number of new features. For a... 続きを読む

Tailwind CSSの入門に！コピペで簡単に利用できるUIコンポーネントのまとめ

2021/10/20 202 users UIコンポーネント コピペ HTML コンポーネント集 入門

Webサイトやスマホアプリで見かけるUIコンポーネントをTailwind CSSで実装されたコンポーネント集を紹介します。 Tailwind CSSを初めて触れる人にも簡単で、デフォルト構成で機能し、HTMLをコピペするだけで簡単に使用できます。 Flowrift Flowrift -GitHub 他にも、Tailwind CSSで実装されたUIコンポーネントを探してい... 続きを読む

色々書き比べた結果Tailwind CSSにしたという話 - Qiita

2021/06/06 245 users Twitter Qiita 発言 結果 デザイン

Twitterでこういう発言を見かけまして Tailwind CSSはデザインに凝ってるサイトでは使えない こだわりが無い場合に向いている は？何いってんの？ って思ったので、自分がいろいろ試した結果、Tailwind CSSを選んだ話を書きます。 はじめに 以前、Tailwind CSSは結構いいぞって話を書いたんですが、この記事の立ち位置的... 続きを読む

ユーティリティーファーストとTailwind CSSのススメ - Qiita

2021/04/01 166 users Qiita ススメ

.align-left { text-align: left; } .align-center { text-align: center; } .align-right { text-align: right; } .align-top { vertical-align: top; } .align-middle { vertical-align: middle; } .align-bottom { vertical-align: bottom; } .mb-1 { margin-bottom: 1rem; } .mb-2 { margin-bottom: 2rem; } .mb-3 {... 続きを読む

CSSを書くのが劇的に楽になる！ユーティリティファーストのCSSフレームワーク「Tailwind CSS」 | コリス

2019/11/28 278 users ライセンス フロントエンド コリス 翻訳記事 CSS

日本でも、Tailwind CSSを使用する人が増えてきましたね。 フロントエンドの開発者がTailwind CSSを実際に使い始めたら、CSSを書くのが劇的に楽になった話を紹介します。 How I Stopped to Write CSS by Luca Spezzano 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳... 続きを読む

[CSS]便利なのが登場！レイアウトやUIコンポーネント用のスタイルシートが簡単にまとめて利用できる -Tailwind CSS | コリス

2017/11/06 92 users コリス Flexbox エレメント フレームワーク CSS

既存のページに外部CSSを加えるだけで、最近のWebサイトやブログで見かけるさまざまなコンポーネントやエレメント、Flexboxベースの柔軟なレイアウトをカスタマイズできるスタイルをまとめたCSSのフレームワークを紹介します。 Flexboxを使ってみたい、天地の中央に配置したい、シャドウを加えたい、レスポンシブ対応のナビゲーションを備えたいなど、簡単に利用できます。 デザインにも幅広く対応してい... 続きを読む