(Translated by https://www.hiragana.jp/)
tailwindの人気記事 247件 - はてなブックマーク

検索けんさく対象たいしょう

並ならび順じゅん

ブックマーク数すう

期間きかん指定してい

  • から
  • まで

1 - 40 件けん / 247件けん

新着しんちゃく順じゅん 人気にんき順じゅん

tailwindの検索けんさく結果けっか1 - 40 件けん / 247件けん

tailwindに関かんするエントリは247件けんあります。 css、 Tailwind、 react などが関連かんれんタグです。 人気にんきエントリには 『【夫婦ふうふで開発かいはつ】1年ねんかけて1週間しゅうかんを振ふり返かええるアプリを本気ほんきで開発かいはつしてみた』などがあります。

tailwindの関連かんれんエントリー

  • 【夫婦ふうふで開発かいはつ】1年ねんかけて1週間しゅうかんを振ふり返かええるアプリを本気ほんきで開発かいはつしてみた

    1年ねんと2ヶ月かげつかけて開発かいはつしていたアプリがリリースできたので記事きじにしました。 詳くわしい開発かいはつのログは以下いかのスクラップにまとめています 👌 リリースしたアプリ ダウンロードはこちら。 ■ iOS ■ Android LPサイト アプリを開発かいはつしたきっかけ 以前いぜんから週しゅう1で家族かぞくの振ふり返がえりの時間じかんを設もうけていて、今週こんしゅうあった出来事できごとを互たがいに共有きょうゆうして議事ぎじ録ろくに残のこすことを習慣しゅうかんにしていました。 ただ、上記じょうきの運用うんようをしている間あいだに以下いかのような問題もんだいがあることに気きづきました。 振ふり返がえりの際さいに、今週こんしゅうの出来事できごとを思おもい出だせない まとまった期間きかんの振ふり返かえりたいときに、テキスト情報じょうほうのみだとピックアップしづらい 良よかった出来事できごとのみピックアップしたい 振ふり返がえりを開催かいさいする時間じかんが毎回まいかいズレる 日付ひづけを忘わすれてスキップしてしまう そこで、上記じょうきを改善かいぜんするためアプリを家族かぞくで開発かいはつしようという話はなしになりました。 どんなアプリ？ memoirは1週間しゅうかんを振ふり替かえるアプリとし

      【夫婦で開発】1年かけて1週間を振り返えるアプリを本気で開発してみた

    • Magic UI

      50+ free and open-source animated components built with React, Typescript, Tailwind CSS, and Framer Motion. Perfect companion for shadcn/ui.

        Magic UI

      • 2020年ねんのフロントエンドエンジニアの技術ぎじゅつスタックの一いち例れい

        年としの瀬せなので、私わたし自身じしんが今年ことし利用りようした技術ぎじゅつをベースに技術ぎじゅつスタックをまとめてみようと思おもいます。 とはいえ Web Standard といった広ひろい対象たいしょうから、フレームワークやライブラリまで、粒つぶ度どの違ちがうものを全すべて言及げんきゅうするのは無理むりがあるというもの。特とくに強つよく言及げんきゅうできるものは個別こべつで説明せつめいしつつ、最後さいごに利用りようする機会きかいがなかったものも最後さいごに記載きさいする形かたちで。 以下いか常体じょうたい。 追記ついき: マイナー企業きぎょうのようなので一応いちおう書かいておきますが、筆者ひっしゃは本業ほんぎょうではLINE株式会社かぶしきがいしゃという組織そしきでいわゆるエンジニアリングマネージャーと言いわれるような業務ぎょうむとその採用さいように関かかわる仕事しごとをしています。 利用りようした技術ぎじゅつ一覧いちらん HTML/CSS/JS みたいなことを書かいてるとキリがないので、独断どくだんと偏見へんけんで区分くわけして適宜てきぎ漉すいています。特とくに利用りようする機会きかいが多おおかったものは太字ふとじでピックアップ。 Frontend Language/Platform TypeScript JavaScr

          2020年のフロントエンドエンジニアの技術スタックの一例

        • Webフロントエンド入門にゅうもん

          まずはじめに HTML、CSS、JSを学まなんだ後のちにモダンなweb制作せいさくを行おこなう上うえでこれから何なにを学まねべばいいだろうと手探てさぐり状態じょうたいだった過去かこがあるので、今こん同おなじ悩なやみを抱かかえている方ほうに向むけてこの記事きじを書かこうと思おもいました。また、自分じぶん自身じしんが2023年ねんに多おおくのことを学まなんだのでそれの整理せいりになればという思おもいもあります。 あと、いいね、コメントいただけると記事きじ作成さくせいの励はげみになります😇 この記事きじの対象たいしょう者しゃ HTML, CSS, JSはある程度ていど理解りかいした モダンなWeb制作せいさくを行おこないたい これから学まなぶべき技術ぎじゅつ React, Next.js 一いち度どは聞きいたことある人ひとも多おおいと思おもいます。これは、Webサイトを効率こうりつ的てきに開発かいはつすることを目的もくてきに作つくられたJSのフレームワーク(正確せいかくにいうとReactはライブラリ)です。 ReactはFacebook社しゃが開発かいはつしたもので、それをVercel社しゃがより使つかいやすくしたものがNext.jsです。 作成さくせいするものによっ

            Webフロントエンド入門

            • tailwindの関連かんれんエントリー

          • テックリードとして入社にゅうしゃしてからやったことをまとめてみた。 - Qiita

            現在げんざいの会社かいしゃにテックリード（１人ひとり目めの正社員せいしゃいんエンジニア）として入社にゅうしゃして、２年間ねんかんやってきたことを書かいています。 エンジニア二に年ねん目めでテックリードとして試行しこう錯誤さくごしてきて、自分じぶんの振ふり返かえりもしたいという思おもいから記事きじを書かきました。 （前提ぜんていとして、シード期きのスタートアップで実行じっこうしてきたことです。） 入社にゅうしゃ時じのチーム課題かだい 入社にゅうしゃ当時とうじは、２週間しゅうかん単位たんいのスプリントでスクラムを回まわしてましたが、全員ぜんいんが業務ぎょうむ委託いたくだったこともあり、完全かんぜんな内うち製せい化かを進すすめる必要ひつようがあり、主おもな課題かだいは以下いかでした。 継続けいぞく的てきリリースが困難こんなんな状態じょうたいになっており、それを解消かいしょうすることが急務きゅうむ 社内しゃないにエンジニアがいなかったので、開発かいはつ組織そしき体制たいせいづくりが必要ひつようだった。 ウォーターフォール寄よりのリリースが多おおく、継続けいぞく的てきにリリースする文化ぶんかがなかった。 リファクタリングやテストコードが不十分ふじゅうぶんだった。 改善かいぜんしたこと Zenhubを導入どうにゅう それまでは、GitHub Projectで進捗しんちょく管理かんりをし

              テックリードとして入社してからやったことをまとめてみた。 - Qiita

            • Next.js + TypeScript + Tailwind CSS の開発かいはつ環境かんきょうをできるだけ丁寧ていねいに構築こうちくする【2024年ねん】

              はじめに 最近さいきん、Next.js、TypeScript、Tailwind CSSを使つかって技術ぎじゅつブログを立たち上あげました。（まだあまり更新こうしんは進すすんでいませんが…） このプロジェクトを通つうじて構築こうちくした開発かいはつ環境かんきょうがわりと快適かいてきだったので、誰だれかの参考さんこうになるかもしれないと記事きじを書かいてみることにしました。 できる限かぎりわかりやすく詳細しょうさいな説明せつめいを心こころがけましたが、その結果けっか、記事きじのボリュームが大おおきくなってしまいました。長文ちょうぶんですが、興味きょうみのある方ほうはぜひ読よんでみてください🙏 また、この記事きじ内ないで紹介しょうかいした内容ないようをセットアップしたリポジトリを公開こうかいしています。 Next.jsのボイラープレートとして活用かつよう可能かのうですので、興味きょうみのある方ほうはぜひ覗のぞいてみてください。

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

              • いまNext.jsで新規しんきサービスを立たち上あげるときの観点かんてん（Router・CSS・認証にんしょう・監かん視しなど/2023年ねん末まつ）

                免責めんせき事項じこう 社内しゃない向むけに展開てんかいするように雑ざつにまとめました Next.jsの知見ちけんが深ふかくない人ひとがリードしてPoCを立たち上あげなきゃいけなくなったが、社内しゃない的てきにはNext.jsを推奨すいしょうしているみたいな場面ばめんを想定そうていしています なので自信じしんないところも多おおいですが割わりと断言だんげんするように心こころがけて書かいています PoCの立たち上あげ想定そうていなので、jest/Storybookなど内部ないぶ品質ひんしつ面めんについてあまり深ふかく書かくことを避さけています ほぼ自分じぶんの知識ちしきだけで書かいており私見しけんも多おおいですし、そもそも自分じぶん自身じしんがトップクラスの知識ちしきや視座しざを有ゆうしているわけでもないので、まずは以下いかの話はなしを理解りかいはした上うえで、踏襲とうしゅうするかどうかは別途べっと他た記事きじやGitHub、公式こうしきドキュメントなどを漁あさって判断はんだんすることを推奨すいしょう App RouterかPages Routerか 2023年ねん末まつ現在げんざいまだApp Routerは技術ぎじゅつ記事きじが足たりてきている印象いんしょうではないため、社内しゃないでノウハウを積極せっきょく的てきに貯ためていく

                  いまNext.jsで新規サービスを立ち上げるときの観点（Router・CSS・認証・監視など/2023年末）

                • 【2024年ねん】React, Tailwind CSSでメルカリクローンサイトを作つくろう【入門にゅうもん】

                  メルカリのクローンサイトを作つくりながら、React・Tailwind CSSが学まなべる本ほんです。

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

                  • 色々いろいろ書がき比くらべた結果けっかTailwind CSSにしたという話はなし - Qiita

                    Twitterでこういう発言はつげんを見みかけまして Tailwind CSSはデザインに凝こってるサイトでは使つかえない こだわりが無ない場合ばあいに向むいている は？何なにいってんの？ って思おもったので、自分じぶんがいろいろ試ためした結果けっか、Tailwind CSSを選えらんだ話はなしを書かきます。 はじめに 以前いぜん、Tailwind CSSは結構けっこういいぞって話はなしを書かいたんですが、この記事きじの立たち位置いち的てきにはその続つづきみたいなものなので、以下いかの記事きじを始はじめにご参照さんしょういただけるとより分わかりやすいかもしれないです。 この記事きじでは、前回ぜんかい記事きじを書かいた後のち、個人こじん仕事しごとでWebサイトをGatsbyで作つくり、その中なかで、どうやってCSSを書かくのが良よいのか模索もさくした結果けっか、自分じぶんはこれを選えらんだっていうのを、同おなじUIを色々いろいろな方法ほうほうで書かき比くらべたコードを並ならべつつ、どうのこうの筆者ひっしゃの考かんがえを述のべていきます。 その仕事しごとはほとんど筆者ひっしゃが「まかせてくださいよーいい感かんじに作つくりますよー。デザインそろってない

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

                    • 【個人こじん開発かいはつ】収益しゅうえき化かしたサービスのコードを50%以上いじょう削除さくじょして得えられた境地きょうち

                      先さきに境地きょうちを 個人こじん開発かいはつの場合ばあい、少すくないコード・最低限さいていげんのシステム構成こうせいは正義せいぎ。 なぜなら、時間じかんやお金かねに制限せいげんがある個人こじん開発かいはつ者しゃにとってサービスの継続けいぞくに関かかわる問題もんだいだからです。 例たとえば、自分じぶんのサービスを世よに広ひろめたいとか、一発いっぱつ当あてたいとか、作つくったサービスで生活せいかつをしたいとか、 なにか目標もくひょうがあるなら達成たっせいする方法ほうほうは、達成たっせいするまでやめないことです。 なのでサービスを提供ていきょうし続つづけることは最もっとも大切たいせつなことです。 これまで個人こじん開発かいはつ者しゃとしては↓の気持きもちで開発かいはつを進すすめてきました。 しかし、この経験けいけんの後のちにこの↓の名言めいげんの大切たいせつさを改あらためて感かんじることができました。 シンプルにしておけ愚おろか者もの また、本ほん記事きじ本文ほんぶんより たくさんプラグインやモジュールを入いれたシステムはメンテナンスがしんどいです。「デフォルトで使つかう」ということの魅力みりょくを改あらためて実感じっかんしています。リソースが限かぎられている個人こじん開発かいはつの場合ばあい、このような時間じかんの消費しょうひは極力きょくりょくなくす方向ほうこうにしていくべきです。

                        【個人開発】収益化したサービスのコードを50%以上削除して得られた境地

                      • 指示しじしたUIをAIがTailwindベースで実装じっそうしてくれるv0が凄すごい

                        v0とは v0は自然しぜん言語げんごで作つくりたいUIをAIに指示しじするとそのUIをTailwind (shadcn/ui)ベースで作つくってくれるサービスです。 shadcn/uiとは shadcn/uiはRadix UIというUIをもたないヘッドレスUIに対たいしてスタイルを当あてたコンポーネント集しゅうで、TailwindというCSSライブラリを使つかってRadix UIに対たいしてスタイルを当あてています。 shadcn/ui本体ほんたいのライブラリがあるわけではなく、自身じしんのプロジェクトにコンポーネントを直接ちょくせつコピーして使つかうことが特徴とくちょうです！ Tailwindが好すきな人ひとにはたまらないコンポーネント集しゅうですね！ shadcn/uiに最適さいてきに作つくられていますが、Tailwindユーザーであれば作つくられたUIをほぼそのまま使つかうことができます。 下したの画像がぞうのようなチャット風ふうのUIが特徴とくちょうなサービスになっていて、このチャットに指示しじを出だすことでUIを作つくってくれ

                          指示したUIをAIがTailwindベースで実装してくれるv0が凄い

                        • ssig33: "最近さいきん最小限さいしょうげんのReactアプリを作つくるのに使つかってるもの についてとりあえずメモしとく。 ##..."

                          新人しんじん声優せいゆう +81-9014502501 mail@ssig33.com 0088-7709-7529 it/it. my opinion may be not my own. but my fate is my own. 最近さいきん最小限さいしょうげんのReactアプリを作つくるのに使つかってるもの についてとりあえずメモしとく。 前提ぜんてい: デカいフレームワークは使つかわない next.js, Astro, Remixは使つかわない。next.jsとAstroは大好だいすきなのだが、社内しゃない向むけとか個人こじん用ようとか小ちいさいアプリに使つかうにはあきらかに恐竜きょうりゅうであると思おもう。Remixは大好だいすきではない。 前提ぜんてい: SSRしない SSRもSSGもISGもしない。CSRでいい。SSRしたいならReactをそもそもぶん投なげたほうが(個人こじんレベルなら)いいと思おもってる。それがほしいならPHPやRails でええ。今更いまさらRailsでView書かきたくないとか思おもうかもしれない

                            ssig33: "最近最小限のReactアプリを作るのに使ってるもの についてとりあえずメモしとく。 ##..."

                          • フロントエンド界隈かいわいで新あたらしく提唱ていしょうされているT3 Stackについて調しらべてみた

                            T3 Stackとは 昨今さっこんのWeb開発かいはつではTypescriptによる型かた安全あんぜんなWebアプリケーションの開発かいはつを求もとめられている。またバックエンドとフロントエンド、さらにBFFによる構成こうせいにおいていかに型かた安全あんぜんで効率こうりつよく開発かいはつするかはWebアプリ開発かいはつにおいて非常ひじょうに重要じゅうような課題かだいとなっている。 そこでTheo氏しによって「T3 Stack」という技術ぎじゅつスタックが提唱ていしょうされた。 これは最近さいきん注目ちゅうもくのWeb開発かいはつの技術ぎじゅつスタックとなっている T3 Stackにおいては以下いか3つの思想しそうに焦点しょうてんが当あてられている。 simplicity(簡潔かんけつさ) modularity(モジュール性せい) full-stack typesafety(フルスタックの型かた安全あんぜん) そしてこれらの思想しそうを実現じつげんするためにT3 Stackでは以下いか6つの技術ぎじゅつを採用さいようする Next.js tRPC Tailwind CSS Typescript Prisma NextAuth.j

                              フロントエンド界隈で新しく提唱されているT3 Stackについて調べてみた

                            • AIUI.me - Screenshot to code

                              This project is on sale, contact me if you are interested. Contact Transform any screenshot into a fully functional, reusable component with just a single click.

                                AIUI.me - Screenshot to code

                              • フロントエンド初心者しょしんしゃがGatsbyでブログを作つくり直なおした話はなし - As a Futurist...

                                フロントエンド初心者しょしんしゃが無事ぶじに Hugo のブログを Gatsby で一いちから作つくり直なおすことができた。その振ふり返がえり。 歴史れきし インターネットを小中学生しょうちゅうがくせい(もはや 25 年ねん以上いじょう前まえ)に触さわり初ぞめた頃ころに、HTML で文章ぶんしょうの構造こうぞうを作つくり CSS でデザインする、ということができるのを知しって感動かんどうしたけど、結局けっきょく自分じぶんには何なにかが合あわなくてそれを突つき詰つめることができなかった。というか、それを知しったが故ゆえにテーブルレイアウトとかがどうしても気きに入いらず、かといって CSS は float が難むずかしすぎて、結局けっきょくウェブサイトを作つくる、という根本こんぽん的てきな営いとなみをずっと避さけてきてしまった。 時ときは過すぎ、Wordpress の様ようなブログエンジンや Hugo の様ような仕組しくみがあったおかげでブログを初はじめて続つづけることはできた。13 年ねん前まえにレンタルサーバに Wordpress を置おいて始はじめたこのブログも 9 年ねん前まえには VPS での Wordpress 運用うんように

                                  フロントエンド初心者がGatsbyでブログを作り直した話 - As a Futurist...

                                • ユーティリティーファーストとTailwind CSSのススメ - 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 { margin-bottom: 3rem; } これをHTMLに当あてまくって画面がめんを作つくればほら簡単かんたん！お手軽てがるに画面がめんが作つくれるね！ と言いう感かんじである。 これの良よいところというのは、サクサク画面がめんが作つくれること。これを体からだ

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

                                  • 2024年ねんのCSSの書かき方かた、ワークフローとツールについて

                                    CSSには大おおきく変かわるタイミングが何なん度どかありました。レスポンシブ対応たいおう、メディアクエリ、Flexbox、CSS Gridなどはその大おおきく変かわったタイミングでしょう。 そして、2024年ねんもこれらと同様どうように大おおきく変かわりそうです。CSSのネスト、:has()疑似ぎじクラス、subgrid、コンテナクエリ、ビューポート単位たんいなどの新しん機能きのうがすべてのブラウザにサポートされました。 2024年ねんのCSSの書かき方かたとして、より保守ほしゅしやすいCSS、ワークフロー、ツールについて紹介しょうかいします。 How I'm Writing CSS in 2024 by Lee Robinson 下記かきは各かくポイントを意訳いやくしたものです。 ※当とうブログでの翻訳ほんやく記事きじは、元もとサイト様さまにライセンスを得えて翻訳ほんやくしています。 はじめに デザインの制約せいやく 2024年ねんのCSS お勧すすめのCSSツール 終おわりに はじめに 2024年ねんのCSSは、素晴すばらしいの一言ひとことに尽つきます。

                                      2024年のCSSの書き方、ワークフローとツールについて

                                    • 「shadcn/ui」って何なにが凄すごいの？実装じっそう知しらないWebデザイナーが調しらべてみた｜akane

                                      はじめにこんにちは！株式会社かぶしきがいしゃRabeeのデザイナーのakaneです。 今回こんかいは、最近さいきんよく耳みみにする「shadcn/ui」について調しらべてみました。どうやらUIコンポーネントっぽいことは分わかるけど、一体いったい何なにを指さすんだろう？いわゆる「UIライブラリ」との違ちがいって何なに？といった疑問ぎもんをデザイナー目線めせんでお話はなしします。 どうぞ最後さいごまでお楽たのしみください🐰 「shadcn/ui」って最近さいきんよく聞ききますよね「shadcn/ui」という単語たんご、最近さいきんよく耳みみにしませんか？たとえば、最近さいきん話題わだいになった10Xさんの記事きじ。 なんだかよく分わからないけど、UIコンポーネントの話はなしをしているらしい。shadcn/uiはコンポーネントの集あつまりらしい。それを使つかうと、スピーディーなプロダクト開発かいはつができるらしい…。 なんとなくは分わかる気きがするけれど、shadcn/uiって一体いったい何なになのでしょうか？UIコンポーネント集しゅうに見みえるけど、既存きそんのいわゆる「UIラ

                                        「shadcn/ui」って何が凄いの？実装知らないWebデザイナーが調べてみた｜akane

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

                                        「Tailwind CSSめっちゃ負債ふさいになりそう」はそうでもないのでは、と思おもっている Tailwind CSS 1 を一目いちもく見みた人ひと、特とくにCSS初学しょがく者しゃのうちけっこうな割合わりあいが「これエグい負債ふさいになりそう」と思おもう気きがする。なぜなら実際じっさいにそのような意見いけんをちらほら見みるからなんだけども、自分じぶんはあんまりそうは思おもっていないし、微妙びみょうに今いまのCSSについて誤解ごかいがあるような空気くうきも感かんじるのでその理由りゆうを説明せつめいしたい2。JSXと同おなじで嬉うれしさを理解りかいして使つかい慣なれればなんてことはないのだけど、一方いっぽうでその背景はいけいにある話はなしはJSXより複雑ふくざつなので単純たんじゅんに使つかって慣なれればいいという話はなしでもなさそう。 なお、この記事きじは私わたしの以下いかの2ツイートを膨ふくらませたものです。 Tailwind CSS、剥はがすのは大変たいへんそうだけどそれをもって重大じゅうだいな負債ふさいになると評ひょうせるかは微妙びみょうに思おもっている https://x.com/aumy_f/status/18220941478532

                                        • Tailwind CSSの入門にゅうもんに！コピペで簡単かんたんに利用りようできるUIコンポーネントのまとめ

                                          Webサイトやスマホアプリで見みかけるUIコンポーネントをTailwind CSSで実装じっそうされたコンポーネント集しゅうを紹介しょうかいします。 Tailwind CSSを初はじめて触ふれる人ひとにも簡単かんたんで、デフォルト構成こうせいで機能きのうし、HTMLをコピペするだけで簡単かんたんに使用しようできます。 Flowrift Flowrift -GitHub 他ほかにも、Tailwind CSSで実装じっそうされたUIコンポーネントを探さがしている人ひとは下記かきもご覧らんください。 Tailwind CSSで実装じっそうされたUIコンポーネント・ページテンプレート、商用しょうようプロジェクトで無料むりょうのものをまとめました Flowriftは、Tailwind CSSで実装じっそうされたUIコンポーネントのライブラリです。通常つうじょうのHTMLに、Tailwind CSSのデフォルト構成こうせいで機能きのうします。コンポーネントを組くみ合あわせて、ページレイアウトを作成さくせいすることもできます。 Flowrift ライセンスが明記めいきされてい

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

                                          • Claude Code でモックアップを HTML と Tailwind CSS (CDN 版ばん) で作つくる

                                            Claude Code で HTML と Tailwind CSS (CDN 版ばん) でモックアップを作つくるのが便利べんりという話はなしをお手伝てつだい先さきの CTO から教おしえて貰もらって、試ためしたところとても良よかったので雑ざつに書かいて行いく。 そもそも HTML はなんとなくわかってるが、 CSS はまったく書かけないのでモックアップは今いままでは Figma を使つかって作つくっていた。なぜ Figma なのかというと、単たんに Figma 有名ゆうめいだし、おそらく多おおくの人ひとが使つかってるっぽいから情報じょうほうが多おおいのだろうというだけ。 Figma の解説かいせつ書しょを読よんだり、Figma 公式こうしき YouTube を見みたりして色々いろいろ学まなんで、本当ほんとうに最低限さいていげんは作つくれるようになった。実際じっさい自社じしゃサービスを作つくる時ときに開発かいはつ担当たんとう者しゃには Figma でこんなデザインがよいですみたいなものを作つくり、共有きょうゆうして作業さぎょうをお願ねがいしていた。 Claude Code でのモックアップ作成さくせいClaude Code を

                                              Claude Code でモックアップを HTML と Tailwind CSS (CDN 版) で作る

                                            • Tailwind考こう - uhyo/blog

                                              皆みなさんこんにちは。最近さいきんとある事情じじょうでTailwind CSSにわりと真剣しんけんに向むき合あわないといけなくなった筆者ひっしゃです。 Tailwind CSSの話題わだいは、Twitterのフロントエンド界隈かいわいでは定番ていばんのトークテーマのひとつです。しかし、筆者ひっしゃの考かんがえを文章ぶんしょうにまとめたことは無なかったので、このたびブログ記事きじにすることにしました。 結論けつろん筆者ひっしゃが一番いちばんみなさんに伝つたえたいことは、Tailwind CSSは考かんがえ無なしに採用さいようしてよい技術ぎじゅつではなく、採用さいようするには熟慮じゅくりょが必要ひつようだということです。とくに、フロントエンドのスターターキット的てきなプロジェクトの中なかにTailwind CSSが混まざっていることがありますが、あれはけっこうな罠わなです。気軽きがるに採用さいようすべきものではありません。 筆者ひっしゃの考かんがえでは、Tailwind CSSの採用さいようを考慮こうりょに入いれてよいのは次つぎの2つの場合ばあいです。 デザインにこだわりがなく、最低限さいていげん整ととのっていればいい場合ばあい。デザイナー不在ふざいのプロジ

                                                Tailwind考 - uhyo/blog

                                              • Next.jsを使つかう必要ひつようがない小規模しょうきぼなSPAの最小さいしょう構成こうせいを考かんがえてみた

                                                はじめに React開発かいはつにおけるNext.jsのプレゼンスが日ひに日ひに増ましている今日きょうこの頃ころですが、Next.jsを使つかう必要ひつようがない小規模しょうきぼなSPAを作つくる場合ばあいの型かたが欲ほしくなり、色々いろいろ調しらべて技術ぎじゅつ選定せんていをした上うえで実際じっさいに作つくってみるところまでやったので、その技術ぎじゅつ選定せんてい理由りゆうとセットアップ手順てじゅんを共有きょうゆうしたいと思おもいます。 フロントエンドの移うつり変かわりは速はやいとはいえ、割わりとホットな技術ぎじゅつを選定せんていできたと思おもうのでしばらくは使つかっていけそうです（そう思おもいたい…）。 前提ぜんてい 趣味しゅみで小規模しょうきぼなSPAを作つくる場合ばあいを想定そうてい ルーティングなしの単たん機能きのうアプリ SSRが必要ひつようない モーダルなどの動うごきのあるUIが必要ひつようない 技術ぎじゅつスタック Vite Preact TypeScript Tailwind CSS Cloudflare Pages 技術ぎじゅつ選定せんてい理由りゆう Vite 少すこし前まえまではこういうケースではcreate-react-appを使用しようしていましたが、Viteに置おき

                                                  Next.jsを使う必要がない小規模なSPAの最小構成を考えてみた

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

                                                  Next.js, Prisma, GraphQL Code Generator で作つくるフルスタック Web アプリケーション おもにNext.js、Prisma、GraphQL Code Generatorを用もちいたWebアプリケーションの構築こうちく手法しゅほうについて解説かいせつした書籍しょせきとなります。 上記じょうき技術ぎじゅつに加くわえて、以下いかの技術ぎじゅつも採用さいようしています。 ・Tailwind CSS ・NextAuth.js ・Apollo GraphQL ・Prettier ・ESLint ・Vitest ・React Testing Library ・GitHub Actions モダンなWebアプリケーションの開発かいはつ手法しゅほうについて興味きょうみがある方ほうにオススメです。 1章しょう Next.jsのセットアップ 2章しょう Prismaのセットアップ 3章しょう GraphQL Code Generatorのセットアップ 4章しょう テストコードの追加ついか 5章しょう 本番ほんばん環境かんきょうへ

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

                                                  • Auth.js v5ではじめる本格ほんかく認証にんしょう入門にゅうもん

                                                    Next.js 14 / Auth.js v5 / Prisma / Planet Scale / shadcn/ui / Tailwind CSS を用もちいた認証にんしょう・認可にんかをハンズオン形式けいしきで学まなびます。

                                                      Auth.js v5ではじめる本格認証入門

                                                    • 『Tailwind CSS実践じっせん入門にゅうもん』 出版しゅっぱん記念きねん基調きちょう講演こうえん

                                                      「Tailwind CSS実践じっせん入門にゅうもん」出版しゅっぱん記念きねんイベントの基調きちょう講演こうえんで使用しようしたスライドです。 イベント詳細しょうさい → https://pixiv.connpass.com/event/310073/ 書籍しょせき → https://gihyo.jp/book/2024/978-4-297-13943-8

                                                        『Tailwind CSS実践入門』 出版記念基調講演

                                                      • Tokens Studio(Figma Tokens) で小ちいさくはじめるデザインシステム

                                                        📝 はじめに こんにちは犬いぬです。 デザインシステムをはじめる上うえで、 Figma の神かみプラグインを見みつけたので共有きょうゆうします！ わたしが携たずさわっているプロジェクトでは、エンジニアとデザイナーの双方向そうほうこうのコミュニケーションツールとして Figma Tokens を採用さいようしています。 📝 Figma本体ほんたい だけでは実現じつげんが難むずかしい色いろの管理かんり手法しゅほう Figma と フロントエンド実装じっそう時じの色いろの管理かんりについては以下いかのように取とり決きめました。 # 色いろの定義ていぎと利用りよう方法ほうほう 1. Primitive colors を定義ていぎ ここで定義ていぎした色いろをサイト全体ぜんたいで使用しようする。 ※ 定義ていぎはするものの、全すべての色いろをサイト全体ぜんたいで利用りようするとは限かぎらない。 基本きほん色しょく（赤あか、黄き、青あお、、、など）からアルファ値ちや彩いろどり度ど、明度めいどを機械きかい的てきに算出さんしゅつして全ぜんカラーパレットを作成さくせい。機械きかい的てきに出だした色いろに微妙びみょうなものがあった場合ばあいは微ほろ調整ちょうせいする Primitive colors の例れい red.10

                                                          Tokens Studio(Figma Tokens) で小さくはじめるデザインシステム

                                                        • Tailwind CSSの入門にゅうもんに！ コピペで簡単かんたんに実装じっそうできるUIコンポーネントとページレイアウトのまとめ -Preline UI

                                                          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

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

                                                          • 朗報ろうほう！ CSSの:has()疑似ぎじクラスがすべてのブラウザにサポートされました、:has()疑似ぎじクラスの便利べんりな使つかい方かたのまとめ

                                                            CSSの:has()疑似ぎじクラスは便利べんりそうだけどブラウザのサポートがまだ、と見送みおくっていた人ひとに朗報ろうほうです。12/19にリリースされたFirefox 121（リリース情報じょうほう）でサポートされ、これで:has()疑似ぎじクラスがすべてのブラウザにサポートされました。 そんな:has()疑似ぎじクラスの便利べんりな使つかい方かたを紹介しょうかいします。 :has()疑似ぎじクラスのサポート状じょう況きょう ※まだFirefox 121の分ぶんがアップデートされていないようです。 Chrome, Edgeは105から、Safariは15.4からサポートされているので、来年らいねんは:has()疑似ぎじクラスを使用しようする機会きかいも増ふえるでしょう。 また、12/20にアップデートされたTailwind CSS v3.4（リリース情報じょうほう）でも:has()疑似ぎじクラスがサポートされました。 :has()疑似ぎじクラスの基礎きそ知識ちしき CSSの:has()疑似ぎじクラスとは、指定していした要素ようそがある場合ばあいにのみ

                                                              朗報！ CSSの:has()疑似クラスがすべてのブラウザにサポートされました、:has()疑似クラスの便利な使い方のまとめ

                                                            • 個人こじん開発かいはつでデザインに悩なやむエンジニアへ。工数こうすうを抑おさえていい感かんじのUIを作つくる方法ほうほう【Meraki UI】

                                                              この記事きじは「RUNTEQ Advent Calendar 2024」23日にち目めの記事きじになります。 はじめに プログラミングスクールRUNTEQでエンジニア兼けん講師こうしをしているいっぺい（@ippei_111）と申もうします。 いきなりですが個人こじん開発かいはつを行おこなう時ときにアプリケーションのUIを考かんがえるのに悩なやんだ経験けいけんはありませんか？ エンジニアあるあるかもしれませんが、個人こじん開発かいはつをする際さいに機能きのうの実装じっそうはできるが、デザインの部分ぶぶんでどうしたら良よいのか迷まよってしまい、手てが止とまってしまうことがあると思おもいます。 本来ほんらい機能きのう開発かいはつに時間じかんをかけたいが、デザインに凝こりすぎてしまい、余計よけいな工数こうすうと時間じかんがかかってしまうことも多々たたあると思おもいます。 また、デザインに関かんする知識ちしきと経験けいけんがないエンジニアがデザインを考かんがえると、「なんかダサいデザイン」「使つかいづらいUI」になってしまうのもエンジニアあるあるかと思おもいます。 本ほん記事きじでは、デザインに不慣ふなれなエンジニアで

                                                                個人開発でデザインに悩むエンジニアへ。工数を抑えていい感じのUIを作る方法【Meraki UI】

                                                              • 【2024年ねん】React, TypeScript, Tailwind CSSでTodoアプリを作つくろう

                                                                Todoアプリを作つくりながら、React, TypeScript, Tailwind CSSが学まなべる本ほんです。

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

                                                                • Utility-first CSS(Tailwind CSS)が合理ごうり的てきであることの説明せつめいと、CSSによるUI開発かいはつ小史しょうし

                                                                  目次もくじ CSS小史しょうし SUIT CSS - 命名めいめい規約きやくベースのCSS方法ほうほう論ろん styled-components - CSS in JS Tailwind CSS - Utility-first CSS なぜインラインスタイルではダメなのか まとめ タイムライン 参考さんこうリンク CSS小史しょうし CSSでアプリのUIを実装じっそうするための手法しゅほうは、これまでいくかの変遷へんせんを辿たどってきた。 はるか昔むかし、CSSが生うまれて間あいだもないころには、関心かんしんの分離ぶんりという文脈ぶんみゃくから、FONT要素ようそなどの物理ぶつりタグはよくないものとされ、 コンテンツ(HTML)とスタイル(CSS)をきっちりと分離ぶんりすることが奨励しょうれいされはじめた。 そこでは、HTMLはあくまで文書ぶんしょであり、CSSのクラスセレクタという接点せってんでコンテンツと見みた目めが隔離かくりされることで、それらは別世界べっせかいのものとして管理かんりされていた。 また、大だい規模きぼサービス開発かいはつにおいていかにCSSを管理かんりするかという問題もんだい意識いしきはまだ

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

                                                                  • モダンな技術ぎじゅつで手軽てがるに地図ちずアプリを始はじめてみよう！！！（Next.js/TypeScript/Tailwind CSS/maplibre GL JS/Deck.gl） - Qiita

                                                                    モダンな技術ぎじゅつで手軽てがるに地図ちずアプリを始はじめてみよう！！！（Next.js/TypeScript/Tailwind CSS/maplibre GL JS/Deck.gl）TypeScriptNext.jsdeckgltailwindcssMapLibre はじめに はい！！！今年ことしもやってまいりましたMIERUNEアドベントカレンダー！！！ 記念きねんすべき1日にち目めは「何なにをするにもまずは環境かんきょう構築こうちくからだよね！」ということで、モダンな技術ぎじゅつをふんだんに使つかってフロントエンド側がわの環境かんきょうを構築こうちくし、簡単かんたんな地図ちずアプリ用ようテンプレートを作成さくせいいきたいと思おもいます！ 最新さいしん技術ぎじゅつを利用りようすればめんどくさい環境かんきょう構築こうちくも簡単かんたんに行おこなえるようになるぞーっていうのを知しってもらえればなーと思おもいます！ こちらに記載きさいの手順てじゅんを全部ぜんぶ実行じっこうしたテンプレートは以下いかのリポジトリで公開こうかいしていますので、せっかちな方ほうはこちらからどうぞ！ https://github.com/n

                                                                      モダンな技術で手軽に地図アプリを始めてみよう！！！（Next.js/TypeScript/Tailwind CSS/maplibre GL JS/Deck.gl） - Qiita

                                                                    • Tailwind CSSを本気ほんきでカスタマイズする方法ほうほう

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

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

                                                                      • TailwindCSSを始はじめようとしている人ひとへ

                                                                        TailwindCSSを始はじめようとしている人ひとへ JSフレームワーク内ないでスタイルをどのように当あてるべきかは,多おおく議論ぎろんされるものであるが,そんな中なかでTailwindCSSが注目ちゅうもくと人気にんきを集あつめている様子ようすである. それはそうと私わたしはなかなか使つかうまで踏ふみ出だせなかったが,v3.0以降いこうにようやく使つかってみたので, 使つかい方かたをざっくり知しりたい人ひと できることをざっくり知しりたい人ひと TailwindCSSをエアプしたい人ひと に向むけて個人こじん的てきな所感しょかんと要点ようてんを書かいていく. TailwindCSSをすごく簡単かんたんに classNameに特定とくていのclassを指定していすることでStyleを当あてていくCSSフレームワーク. 例たとえば,ここにあるように, bg-red-600とclassNameをつけることで,CSSのbackground-color: #dc2626;と同様どうようのCSSプロパティを当あてたことになる. 普段ふだんこのように書かくところを

                                                                          TailwindCSSを始めようとしている人へ

                                                                        • Tailwind CSS を使つかう時ときに一緒いっしょに入いれたいライブラリ

                                                                          Tailwind CSS はすべてをユティリティクラスで書かくという特性とくせい上じょう、HTML にはクラスがたくさん書かかれることになります。1 つの要素ようそに対たいしてクラスがたくさん並ならんでいると、視覚しかく的てきにどのようなスタイルが適用てきようされているのかを把握はあくするのが難むずかしくなります。条件じょうけんによってクラス名めいを付つけ替かえる処理しょりを行おこなっていると更さらに複雑ふくざつになります。 <button className={` ${variant === "primary" && "border border-blue-500 bg-blue-500 text-white"} ${ variant === "secondary" && "border border-gray-500 bg-gray-500 text-white" } ${variant === "default" && "border border-gray-500 bg-white

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

                                                                          • Token CSS

                                                                            Token CSS is a work-in-progress. Bugs, missing features, and breaking changes are expected! Token CSS is a new tool that seamlessly integrates Design Tokens into your development workflow. Conceptually, it is inspired by tools like Tailwind, Styled System, and many CSS-in-JS libraries that provide tokenized constraints for your styles—but there's one big difference. Token CSS embraces .css files a

                                                                              Token CSS

                                                                            • Tailwind CSSの二に面めん性せい、デザインシステムを借かりるということ | lacolaco's marginalia

                                                                              この雑記ざっきを書かく問題もんだい意識いしきは、Tailwind CSSに対たいして向むけられている世よの人々ひとびとの不満ふまんが、Tailwind CSSがコミットしていることから外はずれた、お門違かどちがいの期待きたいの押おしつけになっているのではないかと感かんじるところにある。 ライブラリやフレームワーク、道具どうぐにはそれが作つくられた目的もくてきがあり、果はたそうとするコミットメントがある。その圏内けんないにおいて果はたされていないコミットメントに対たいする不満ふまんは、それ自体じたいの存在そんざい意義いぎにかかわる意味いみを持もつが、しかし利用りよう者しゃが一方いっぽう的てきに寄よせた期待きたいが果はたされないことに対たいする不満ふまんはそうではない。 念ねん押おしするまでもないと思おもうが、これはTailwind CSSに対たいして不満ふまんを向むけるべきではないという話はなしではまったくない。むしろ、その不満ふまんの下敷したじきとなっている Tailwind CSS への期待きたいが Tailwind CSS 自体じたいによってコミットされたものでないとしたら、不満ふまんを向むけてもしょうがないのでは

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

                                                                              • v0 by Vercel

                                                                                Chat with v0. Generate UI with simple text prompts. Copy, paste, ship.

                                                                                  v0 by Vercel

                                                                                • CSS設計せっけいにおける、すべてがコンポーネントであるという誤謬ごびゅう

                                                                                  後日ごじつ追記ついき: WEB+DB PRESS Vol.133でさらに詳くわしく書かいた。 BEMによってもたらされた、コンポーネントベースのアプローチでは、「ページはコンポーネントの集合しゅうごうによって表現ひょうげんされるべきであり、ページに含ふくまれるのはすべてがコンポーネントである」と考かんがえる。しかしこれまでCSSを書かいてきた経験けいけんから、これではデザイン意図いとをまともに表現ひょうげんすることができないと感かんじ始はじめた。なぜなら、普通ふつうデザイナーはページのすべてがコンポーネントであるとは考かんがえないからだ。 もちろんページの構成こうせい要素ようそのなかには、明あきらかにそれが「コンポーネント」であると意識いしきして作つくられたものもある。ただしそれは一部いちぶであり、全部ぜんぶではない。「コンポーネントもあれば、コンポーネントではないものもある」という感覚かんかくのほうが普通ふつうなのだ。 典型てんけい的てきなUIライブラリにある、「ザ・コンポーネント」みたいなものだけではページは完成かんせいしない。例れいとして、一貫いっかんしてB

                                                                                    CSS設計における、すべてがコンポーネントであるという誤謬
                                                                                  1 2 3 4 5 6 7 次つぎのページ

                                                                                  新着しんちゃく記事きじ

                                                                                  はてなブックマーク

                                                                                  公式こうしきTwitter

                                                                                  はてなのサービス

                                                                                  • App Storeからダウンロード
                                                                                  • Google Playで手に入れよう
                                                                                  Copyright © 2005-2025 Hatena. All Rights Reserved.