Next.jsのApp Routerを学ぶ際、shadcn/uiが参考になったという話 - Qiita

2024/05/11 58 users Qiita shadcn RSC Reactコンポーネント

Next.jsのApp Routerを学ぶ際に、UIライブラリを探していたところ、shadcn/uiが参考になったので紹介します。 shadcn/uiは、フレームワークやライブラリではなく、コピペで利用できるReactコンポーネントのサンプル集という立ち位置になっています。Tailwind CSSでデザインされており、React Server Components(RSC)にも... 続きを読む

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の設... 続きを読む

Tailwind CSSを使う時の疑問と解決方法

2024/01/24 17 users CSS 疑問 CSSファイル つまづいたポイント 解決方法

2024年1月24日 CSS, Webサイト制作 制作時に「CSSファイルをこれ以上増やしたくない…」「クラス名を考えるのしんどい…」なんて思ったことはないでしょうか？私はあります！あれこれ試した結果、Tailwind CSSが使いやすかったので、導入時につまづいたポイントと解決方法をまとめてみます。 ↑私が10年以上利用している会... 続きを読む

商用利用無料！ コピペで簡単に実装できる、Tailwind CSSで実装されたUIコンポーネントが150種類以上！ -Mamba UI

2024/01/15 22 users UIコンポーネント コピペ コンポー 商用利用無料 HTML

Webサイトやスマホアプリでよく使用されるUIコンポーネントとテンプレートをTailwind CSSベースで実装したコレクションを紹介します。 コードはHTMLとVueとJSXに対応しており、Tailwind CSSを用意しておけばコピペで簡単に利用できます。 Mamba UI Mamba UI -GitHub Mamba UIの特徴 Mamba UIの使い方 Mamba UIのコンポー... 続きを読む

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 ... 続きを読む

レスポンシブデザインで Tailwind CSS と CSS custom properties を併用する体験が良過ぎる

2023/05/01 11 users レスポンシブデザイン 実装 前提 Next.js コード

Tailwind CSS での開発体験が個人的に最高すぎて、最近はどんなWebサイトの実装でも利用しています。 CSS custom properties を併用することもあり、そのときに嬉しいことを紹介します。 Next.js を使っている前提でコード・ファイル名を例示しますが、他でも扱えると思います。 CSS custom properties 併用したい場面 ... 続きを読む

ブックマークしておくと便利！ Tailwind CSSで実装された最新のUIコンポーネントライブラリ -Sailboat UI

2023/03/20 21 users UIコンポーネントライブラリ フック 最新

// tailwind.config.js const defaultTheme = require("tailwindcss/defaultTheme"); const colors = require("tailwindcss/colors"); module.exports = { content: ["./src/**/*.{html,js}"], theme: { extend: { // Set font family fontFamily: { sans: ["Inter", ...defaultTheme.fontFamily.sans], }, // Set theme... 続きを読む

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 続きを読む

vim沼: NeovimのReact、TypeScript、Tailwind CSS用セットアップ

2022/08/11 10 users React TypeScript Neovim Takuya

元記事(英語): My Neovim setup for React, TypeScript, Tailwind CSS, etc こんにちは、個人アプリ作家のTakuyaです。 Vim歴はかれこれ10年以上です。 僕はInkdropというMarkdownノートアプリを独りで開発しています。 このアプリはElectronやReact Nativeで組まれており、マルチプラットフォームで動作します。 それら... 続きを読む

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の実装やデバッグに便利！ 各セレクタに対応したプロパティや値を表示するデベロッパーツールの機能拡張 -Tailwind DX

2022/06/28 19 users デベロッパーツール セレクタ デバッグ プロパティ 実装

デベロッパーツールでTailwind CSSの各セレクタに対応したプロパティや値を実装・デバッグできるChromeデベロッパーツールの機能拡張を紹介します。 .m-1や.p-1といったセレクタをはじめ、:smや:lgなど...記事の続きを読む 続きを読む

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

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

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

Tailwind CSS の一歩進んだ書き方

2022/05/23 21 users 書き方 一歩 Just-in-time HTML スタイル

<h1 class="text-3xl font-bold underline"> Hello world! </h1> 簡単な例として、上記 HTML を記述すると、以下のようにスタイリングされます。 Just-in-Time 改め arbitrary values 上記例にある text-3xl などのスタイルは予め Tailwind CSS が用意しているものですが、tailwind.config.js を編集することで簡単に変... 続きを読む

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

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

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

【React】daisyUIを触ってみた！かなり楽しいw

2022/03/08 12 users React スグレモノ Bootstrap コンポーネント

daisyUIとは The most popular, free and open-source Tailwind CSS component library Tailwind CSSをベースとしたCSSライブラリで、No JavaScriptでかわいくて機能的な見た目を実現できるスグレモノ。 Bootstrapのような使い勝手でいろんなコンポーネントを実現できる。実態はTailwind CSSなので拡張も簡単。 今回はこ... 続きを読む

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

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

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

これは便利！ Tailwind CSSのチートシート、すべてのクラスとそのプロパティ・値を参照および検索もできる優れもの

2021/12/21 12 users チートシート 優れもの 参照 クラス 未対応

先日、v3.0がリリースされ、ますます注目されているTailwind CSSのチートシートを紹介します。 Tailwind CSSに使用されているすべてのクラスとそのプロパティ・値を参照および検索もでき、非常に便利です。残念ながら、v3.0にはまだ未対応。 Tailwind CSS Cheat Sheet Tailwind CSSとは Tailwind CSSのチートシート Tail... 続きを読む

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... 続きを読む