タグ「Tailwind CSS」 - はてブログ

タグ Tailwind CSS

新着順人気順 5 users 10 users 50 users 100 users 500 users 1000 users

(1 - 25 / 63件)

「スピード」と「こだわり」を両立したい！shadcn/uiとTailwind CSSを活用したゼロからのコンポーネントライブラリ構築 - 10X Product Blog

2024/12/17 14 users shadcn コンポーネントライブラリコンポー SaaS

こんにちは、10X プロダクトデザイナーの日比谷（@suuminbot）です。現在10Xでは新規プロダクトを複数開発している真っ只中ですが、私もその一環でshadcn/uiとTailwind CSSを活用しつつ、SaaSのサービス画面（管理画面）用のコンポーネントライブラリをゼロから構築していました。少し前に一通り最低限必要なコンポー... 続きを読む

UnoCSS を知る、まずは経緯から

2024/08/15 12 users 経緯 CSS フレームワークエンジン初学者想定読者

👋 はじめにナイトウ(@engineer_naito)と申します。今回は CSS フレームワーク Atomic CSS エンジンである UnoCSS について紹介したいと思います。 🧐 想定読者 Tailwind CSS などの CSS フレームワークを利用したことのある開発者であればスラスラ読めると思いますが、初学者の方であっても問題なく読めると思います... 続きを読む

「Tailwind CSSめっちゃ負債になりそう」はそうでもないのでは、と思っている

2024/08/10 192 users CSS 誤解割合意見うち

「Tailwind CSSめっちゃ負債になりそう」はそうでもないのでは、と思っている Tailwind CSS 1 を一目見た人、特にCSS初学者のうちけっこうな割合が「これエグい負債になりそう」と思う気がする。なぜなら実際にそのような意見をちらほら見るからなんだけども、自分はあんまりそうは思っていないし、微妙に今のCSSについ... 続きを読む

コピペで時短、Tailwind CSSおすすめUIコンポーネント、UIキット集、便利ツール【まとめ】

2024/07/23 15 users コピペ時短爆速 UIコンポーネント集便利ツール

開発者にとっていかに早くWeb制作を進められるかは、永遠のテーマと言えます。この記事ではWebサイト制作を効率化、爆速にするTailwind CSSのUIコンポーネント集、便利ツールをまとめてご紹介します。表現したいレイアウトをコピペのみで実現でき、これまでかかっていたサイト制作時間を劇的に削減します。おしゃれな... 続きを読む

Tailwind CSS初心者が絶対ハマる落とし穴

2024/07/12 90 users 落とし穴 zaru ムーザルちゃんむーさんポイント

ムーザルちゃんねるのzaruです。今回はムーさんと、Tailwind CSS初心者が絶対ハマる落とし穴について話しました。Tailwind CSSを使い始めた人、あるいはまだ使ったことがない人には是非見てほしいです。すでにこの落とし穴から抜け出している人はあるよねーって感じで眺めてください。すごいサムネイル… ハマるポイント... 続きを読む

既存プロジェクトを Tailwind CSS に段階的にマイグレーションする方法

2024/07/01 6 users 既存プロジェクト prefix 方法競合ノー

not Tailwind CSS プロジェクトを Tailwind CSS に移行する機会があったのでアプローチを紹介します。ポイントベースが16px ではない場合、tailwind-pixel-perfect-preset で rem to px を行い、 Taiwlind CSS のサイズ指定(h-4など）を踏襲する tw- prefix をつけて既存スタイルの競合を回避する Tailwind CSS のノー... 続きを読む

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でz-indexの値をマジックナンバーにしないための小ワザ

2024/04/25 9 users z-index マジックナンバーアイコン我々背景

背景小ネタです。先日以下のようなバグ改修タスクでソースレビューを担当しました。「全画面モーダルを実装したら、グローバルメニューより上に表示されてしまった。なのでz-indexを修正しました！」我々が開発しているマナリンクでは、画面右上の自分のアイコンをクリックするとメニューが表示されます。ところが... 続きを読む

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が学べる本です。続きを読む

Tailwind CSSにおけるHTMLのコンポーネント化とCSSのコンポーネント化

2024/03/18 7 users CSS HTML コンポーネント化パーシャル Alt

Tailwind CSSにおいて、スタイルの組み合わせを抽象化したいと考えたとき、対処としてはいくつかの方法が考えられる。もっとも一般的なのは、コンポーネントやパーシャルとして、クラス属性値とHTMLをセットで抽出する方法。 <template> <div> <img class="rounded" :src="img" :alt="imgAlt" /> <div class="mt-2"> <d... 続きを読む

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が生まれて間もないこ... 続きを読む

【2024年】React, TypeScript, Tailwind CSSでTodoアプリを作ろう

2024/03/12 130 users React TypeScript ToDoアプリ

Todoアプリを作りながら、React, TypeScript, Tailwind 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... 続きを読む

(1 - 25 / 63件)

次の25件 »