Next.js + TypeScript + Tailwind CSS の開発環境をできるだけ丁寧に構築する【2024年】
はじめに 最近、Next.js、TypeScript、Tailwind CSSを使って技術ブログを立ち上げました。（まだあまり更新は進んでいませんが…） このプロジェクトを通じて構築した開発環境がわりと快適だったので、誰かの参考になるかもしれないと記事を書いてみることにしました。 できる限りわかりやすく詳細な説明を心がけましたが、その結果、記事のボリュームが大きくなってしまいました。長文ですが、興味のある方はぜひ読んでみてください🙏 また、この記事内で紹介した内容をセットアップしたリポジトリを公開しています。 Next.jsのボイラープレートとして活用可能ですので、興味のある方はぜひ覗いてみてください。
メルカリのクローンサイトを作りながら、React・Tailwind CSSが学べる本です。
Twitterでこういう発言を見かけまして Tailwind CSSはデザインに凝ってるサイトでは使えない こだわりが無い場合に向いている は？何いってんの？ って思ったので、自分がいろいろ試した結果、Tailwind CSSを選んだ話を書きます。 はじめに 以前、Tailwind CSSは結構いいぞって話を書いたんですが、この記事の立ち位置的にはその続きみたいなものなので、以下の記事を始めにご参照いただけるとより分かりやすいかもしれないです。 この記事では、前回記事を書いた後、個人仕事でWebサイトをGatsbyで作り、その中で、どうやってCSSを書くのが良いのか模索した結果、自分はこれを選んだっていうのを、同じUIを色々な方法で書き比べたコードを並べつつ、どうのこうの筆者の考えを述べていきます。 その仕事はほとんど筆者が「まかせてくださいよーいい感じに作りますよー。デザインそろってない
Tailwind CSS - Rapidly build modern websites without ever leaving your HTML.
Rapidly build modern websites without ever leaving your HTML.A utility-first CSS framework packed with classes like flex, pt-4, text-center and rotate-90 that can be composed to build any design, directly in your markup. <figure class="md:flex bg-slate-100 rounded-xl p-8 md:p-0 dark:bg-slate-800"> <img class="w-24 h-24 md:w-48 md:h-auto md:rounded-none rounded-full mx-auto" src="/sarah-dayan.jpg"
日本でも、Tailwind CSSを使用する人が増えてきましたね。 フロントエンドの開発者がTailwind CSSを実際に使い始めたら、CSSを書くのが劇的に楽になった話を紹介します。 How I Stopped to Write CSS by Luca Spezzano 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに Tailwind CSSとは カードコンポーネントで実装の比較 BootstrapとTailwind CSSの比較 Bootstrapがそんなに恋しいですか？ BootstrapとTailwind CSSのどちらを使えばよいか？ CSSにかかる時間はかなり少なくなりました はじめに 私はCSSアーキテクチャにフォーカスしたフロントエンド開発者として、コードを書くために最高の方法を使いたいと思っています
Tailwind CSSは結構いいんでないの？というポエムです ユーティリティーファーストって考え方について まず、 ユーティリティークラスが何かということ ユーティリティークラスを使ってHTMLを書いていくということってどういうことか これは、ある程度CSSを書いている人であれば想像できることであろうと思う。 こんな風に、あらかじめユーティリティー的なクラスを用意しーの .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-a
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実践入門」出版記念イベントの基調講演で使用したスライドです。 イベント詳細 → https://pixiv.connpass.com/event/310073/ 書籍 → https://gihyo.jp/book/2024/978-4-297-13943-8
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
モダンな技術で手軽に地図アプリを始めてみよう！！！（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
Webページでよく見かけるUIコンポーネント、ヘッダ・フッタ・ヒーロー・ギャラリー・ステップ・お問い合わせなどをTailwind CSSですぐに実装できるコードをまとめたtailblocksを紹介します。 それぞれのUIコンポーネントにはさまざまなバリエーションもあり、スマホ・タブレット・デスクトップでの表示、ライトモード・ダークモード、テーマカラーの変更など、非常に便利です。 tailblocks -GitHub tailblocksの特徴 tailblocksのデモ tailblocksの特徴 tailblocksは、Tailwind CSSですぐに実装できるUIコンポーネントをまとめたものです。Tailwind CSSはUIコンポーネントをカスタマイズするためのユーティリティとなるclassを提供するCSSです。 参考: Tailwind CSSの便利な使い方、レイアウトやUIコンポ
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
目次 CSS小史 SUIT CSS - 命名規約ベースのCSS方法論 styled-components - CSS in JS Tailwind CSS - Utility-first CSS なぜインラインスタイルではダメなのか まとめ タイムライン 参考リンク CSS小史 CSSでアプリのUIを実装するための手法は、これまでいくかの変遷を辿ってきた。 はるか昔、CSSが生まれて間もないころには、関心の分離という文脈から、FONT要素などの物理タグはよくないものとされ、 コンテンツ(HTML)とスタイル(CSS)をきっちりと分離することが奨励されはじめた。 そこでは、HTMLはあくまで文書であり、CSSのクラスセレクタという接点でコンテンツと見た目が隔離されることで、それらは別世界のものとして管理されていた。 また、大規模サービス開発においていかにCSSを管理するかという問題意識はまだ
2024-04-19に開催されたBARフロントえんどう #2 「CSS Library / Framework」（サイボウズ）での登壇資料です。 イベント → https://cybozu.connpass.com/event/311066/
Tailwind CSS 社内勉強会【まとめ】 - RAKUS Developers Blog | ラクス エンジニアブログ
背景 スコープ Tailwind CSSとは？ コンポーネント指向とは？ Tailwind CSSのメリット class名を考える必要がない デザインシステムの最低保証 ドキュメント、チートシートの豊富さ Tailwind CSSのデメリット classに多くのコードを書く必要があり、可読性が落ちやすい CSSの理解度がある程度必要 デザインを100%再現したい場合に強味を生かしづらい 他ライブラリやフレームワークとの比較 Bootstrapとの比較 Material UI/Vuetify等のUIライブラリとの比較 インライン記述との比較 まとめ 所感 参考 背景 こんにちは。mtaaaです。 社内のフロントエンド勉強会でTailwind CSSについて発表を行ったまとめとして、ブログに残したいと思います。 スコープ Tailwind CSSとは？ なぜTailwind CSSに注目が集ま
この雑記を書く問題意識は、Tailwind CSSに対して向けられている世の人々の不満が、Tailwind CSSがコミットしていることから外れた、お門違いの期待の押しつけになっているのではないかと感じるところにある。 ライブラリやフレームワーク、道具にはそれが作られた目的があり、果たそうとするコミットメントがある。その圏内において果たされていないコミットメントに対する不満は、それ自体の存在意義にかかわる意味を持つが、しかし利用者が一方的に寄せた期待が果たされないことに対する不満はそうではない。 念押しするまでもないと思うが、これはTailwind CSSに対して不満を向けるべきではないという話ではまったくない。むしろ、その不満の下敷きとなっている Tailwind CSS への期待が Tailwind CSS 自体によってコミットされたものでないとしたら、不満を向けてもしょうがないのでは
Tailwind.cssとAlpine.jsで作られた161ものUIやレイアウトを無償公開している・「Windstatic」
WindstaticはTailwind.cssとAlpine.jsで作られた161ものUIやレイアウトを無償公開しているWebサイトです。 UI、というかセクション単位でカテゴライズされていて、ヒーローイメージのブロック、特徴を紹介するブロック、フッター、CTAや値段表などに分けられ、それぞれにいくつかのレイアウトを用意、コードをコピーできるようになっている、という感じです。 スタイルは一貫したもので統一されているので自由に組み合わせても、見た目はある程度はチグハグにならず整えられたサイトが出来上がるかなと思います。 利用にあたりユーザー登録も不要で自由に利用できるみたいです。 Windstatic
*2021 6/11追記 『でもクラス名考えるのめんどくさい』問題についての私の見解を大幅加筆しました。 *本記事はピュアなCSSについてのある程度の知識があり、Tailwind CSSの採用について考えている層を対象読者としています。ピュアCSSの知識が乏しく、最適なCSSフレームワークを探している読者は対象としていません。 色々書き比べた結果Tailwind CSSにしたという話 こちらの記事がバズっていた(6/9現在 over 200likes)為、読ませて頂きました。 これまで主観的な印象と薄い議論で賛否が分かれていたTailwind CSSについてこれまでのcssの技術の変遷を踏まえて技術的にかなり踏み込まれた考察の上で選定の理由が書かれており、Tailwind CSSアンチ派の私にとっても非常に勉強になる記事でありました。リスペクト。 その上で、こちらの記事では私が『それでもC
daisyUI — Tailwind CSS Components ( version 4 update is here )
daisyUI adds component class names to Tailwind CSS so you can make beautiful websites faster than ever. don't re-invent the wheel every time In a Tailwind CSS project, you need to write utility class names for every element. Thousands of class names just to style the most basic elements.
Tailwind CSSチーム、GitHubスター数2.4万超のUIコンポーネント集「Headless UI」をメジャーアップデート
5月8日、Tailwind LabsはReact用の「Headless UI v2.0」をリリースした。 Headless UIとは、Tailwind CSSベースのUIコンポーネント集である。 Tailwind CSSチーム自身が開発を行っており、GitHubスター数も2.4万を超えるなど、高い人気を博している。 このアップデートは、開発者がより少ないコードでより良い開発体験を実現できるようにするための多数の改善を含んでいる。 主な更新点は以下の通りだ。 組み込みアンカーポジショニングのサポート 新しいチェックボックスコンポーネントの追加 HTMLフォームコンポーネントの拡充 状態検出の向上 コンボボックスリストの仮想化 新しいウェブサイトと改善されたドキュメント 組み込みアンカーポジショニングのサポート Floating UIがHeadless UIに直接統合され、Menu、Popov
Masonryレイアウトとは、画像やカード型コンテンツをレンガ状に敷き詰めて配置するレイアウトです。Pinterestなどで見かける、高さが異なる画像・カードを配置する時によく使用されるテクニックです。 以前はJavaScriptやライブラリを使用したり、トリッキーなCSSで実装していましたが、Tailwind CSSを使用するとウソみたいに簡単に実装できます。 TailwindCSS Masonry Layout by Luca Spezzano 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに Tailwind CSSのみを使用してMasonryレイアウトを実装する方法 終わりに はじめに Masonryレイアウトは、以前は画像ギャラリーに使用されていました。しかし最近では、このレイアウトはユーザーにとって非常に魅力
Tailwind CSSが私には合わなかった理由
ここ1,2年で、Tailwind CSSを使用する人が増えてきました。Tailwind CSSはユーティリティファーストのフレームワークで、いくつかのclassを組み合わせることでUIコンポーネントやレイアウトを簡単に実装できます。 Webデベロッパーによる、Tailwind CSSが私には合わなかった理由を紹介します。 Why Tailwind Isn't for Me by Jared White Tailwind CSSについて詳しく知りたい人は、以前の記事をご覧ください。 Tailwind CSSの便利な使い方、レイアウトやUIコンポーネント用のスタイルシートが簡単にまとめて利用できる CSSを書くのが劇的に楽になる！ユーティリティファーストのCSSフレームワーク「Tailwind CSS」 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得
ブックマークしておくと便利！ Tailwind CSSで実装された最新のUIコンポーネントライブラリ -Sailboat 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 colors (Required config!) colors: { primary: colors.blue, secondary: colors.slate, }, }, }, // Add plu
2024年1月26日発売の『Tailwind CSS実践入門』の第9章「ユーティリティファーストでデザインシステムを構築する」の一部を、前後編の2回に分けて掲載します。ユーティリティファーストというTailwind CSSの発想を活かしたデザインシステム構築の最初の一歩をまとめたものです。開発者がデザインルールをTailwind CSSの設定に落とし込む過程はもちろん、デザイナーが開発者とどのように協力しあうべきかについても論じています。 本記事の内容は、書籍の最終章に当たる部分です。ほかの章の内容に言及していたり、書籍内ですでに使われた用語が説明なく登場したりするのを防ぐため、書籍の原文から一部を変更しています。 一般的には、デザインシステムとは一貫したデザインや操作性でWebサイトやアプリケーションを提供するためのガイドラインの集まりと理解されます。使われ得る色のパレットや可能なスペー
Tailwind UI - Official Tailwind CSS Components & Templates
Build your next idea even faster.Beautifully designed, expertly crafted components and templates, built by the makers of Tailwind CSS. The perfect starting point for your next project.
Vercel、自然言語からUIを生成するサービス「v0」を実験的に公開。Tailwind CSSとShadcn UIをベースに
Next.jsの開発元として知られるVerelは、生成AIに対して自然言語のプロンプトを与えることでWebのユーザーインターフェイスを自動生成してくれるサービス「v0」をプライベートアルファ版として公開しました。 v0 by Vercel Labs Generate UI with simple text prompts. Copy, paste, ship. Explore the prompt library and join the waitlist today.https://t.co/yaDdOfnOaJ — Vercel (@vercel) September 14, 2023 v0の作例として公開されている、プロンプトから生成されたUIをいくつか見てみましょう。 下記は「A dashboard for saas app」（SaaSのダッシュボードを作って）というプロンプトで生
Tailwind CSSで実装されたWebページやスマホアプリ用のUIコンポーネント・レイアウト・ページテンプレートを紹介します。 公式のUIコンポーネント（Tailwind UI）は有料だったり、他にも有料のものが多数ありますが、オープンソースで利用できるものもたくさんあります。
[CSS]便利なのが登場！レイアウトやUIコンポーネント用のスタイルシートが簡単にまとめて利用できる -Tailwind CSS | コリス
既存のページに外部CSSを加えるだけで、最近のWebサイトやブログで見かけるさまざまなコンポーネントやエレメント、Flexboxベースの柔軟なレイアウトをカスタマイズできるスタイルをまとめたCSSのフレームワークを紹介します。 Flexboxを使ってみたい、天地の中央に配置したい、シャドウを加えたい、レスポンシブ対応のナビゲーションを備えたいなど、簡単に利用できます。 デザインにも幅広く対応しているので、自分のオリジナルのデザインで利用できます。 Tailwind CSS Tailwind CSS -GitHub Tailwind CSSの特徴 Tailwind CSSの使い方 Tailwind CSSで用意されているスタイル Tailwind CSSの実装例 Tailwind CSSの特徴 Tailwind CSSはMITライセンスで、個人でも商用でも無料で利用できます。 ボタン、フォー
![[CSS]便利なのが登場！レイアウトやUIコンポーネント用のスタイルシートが簡単にまとめて利用できる -Tailwind CSS | コリス](https://cdn-ak-scissors.b.st-hatena.com/image/square/2d34cdd6f924a706cf29bd75ff95cedf76093a2f/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201704%2F2017110601.png)
Tailwind CSS の一歩進んだ書き方
-## CSS カスタムプロパティ +## CSS カスタムプロパティの宣言 +## CSS カスタムプロパティの利用 + +```html:html +<h1 class="px-[--gutter]"> + Hello world! +</h1> +``` + +`px-[var(--gutter)]` のように記述することもできますが、`var()` は省略可能です。 -<h1 class="text-[length:var(--title-size)] text-[color:var(--title-color)]"> +<h1 class="text-[length:--title-size] text-[color:--title-color]"> +## フォントサイズと一緒に行の高さを指定するショートハンド + +```html:html +<h1 class="text-
Next.js で簡単な SPA の雛形をつくる際の手順です。 ホームページを Flutter Web から Next.js に移行した際に少し躓いたので整理して記録します。 追記：この記事では従来のWEBアプリケーション(MPA)の対義語としてSPAと表記しています。Next.jsがSPAに分類されるかは様々な意見があるので混乱を招いたかもしれません。たくさんのLIKEと反応ありがとうございます。 環境 執筆時点での各種バージョンです。 Node: 14.17 Next.js: 12.0.4 Tailwind CSS: 2.2.19 TypeScript: 4.5.2 Next.js プロジェクトの作成 下記コマンドで Next.js プロジェクトを作成します。 CreateNextApp を使用すると簡単に TypeScript 対応できて便利ですね。 ソースファイルを src 配下に
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 tour of some of the coolest new features, check out the “What’s new in Tailwind CSS v3.0” video on our
パクチーパクパク小宮山です。 掲題通りTailwind CSSの始め方を最小手数で書いていきます。余談は一切ありません。 tl;dr CSS管理は諦めてTailwind CSSを使おう。 Get Started tailwindcss.com ひたすら公式通りに進めます。例によってフロントエンドプロジェクトの環境構築はひたすら面倒なので、Tailwind CSS以外のツールチェインはなるべく使わない構成を目指します。 installします。 $ yarn init $ yarn add tailwindcss セットアップします。 $ yarn tailwindcss init こういうファイルが作られました。 tailwind.config.js module.exports = { purge: [], theme: { extend: {}, }, variants: {}, plu
商用利用無料！ コピペで簡単に実装できる、Tailwind CSSで実装されたUIコンポーネントが150種類以上！ -Mamba UI
Webサイトやスマホアプリでよく使用されるUIコンポーネントとテンプレートをTailwind CSSベースで実装したコレクションを紹介します。 コードはHTMLとVueとJSXに対応しており、Tailwind CSSを用意しておけばコピペで簡単に利用できます。 Mamba UI Mamba UI -GitHub Mamba UIの特徴 Mamba UIの使い方 Mamba UIのコンポーネント Mamba UIの特徴 Mamba UIは、Webサイトやスマホアプリによく使用されるUI要素をTailwind CSSベースで実装したオープンソースのコレクションです。すべてのコンポーネント・テンプレートはHTMLとCSSで実装されており、Tailwind CSSのおかげで複雑なCSSルールを記述する必要はありません。 Tailwind CSSはユーティリティファーストのCSSフレームワークなので
Update v2.2 - New Creative Agency & Studio Templates, Dashboard Page and more...
こんにちは、たかとーです。 今日はTailwind CSS Resources you wish you had. - DEV Community 👩💻👨💻の日本語訳記事です！ 当記事は、Janeさんの許可を得て翻訳しています。Tweet Tailwind CSS Resources you wish you had. Tailwind CSS リソース 私が学んでいたときに役に立ったいくつかのリソースをリストアップしていきます。それらをあなたのリストに追加したり、すでにある場合は、それらを使い続けてください。 1) TailwindInk ブランドカラーを選ぶと、補色のリストを生成してくれるカラージェネレーターサイトです。カラーコードはTailwindのconfigファイルに簡単にコピーすることができます。 2) Tailblocks この素晴らしいプロジェクトはMert C
Tailwind CSSという言葉、最近よく耳にするようになっています。 カードやボタンなどUIデザインを基本としたCSSスタイリングが特長のBootstrapなどのフレームワークに比べ、Tailwind.cssはHTMLに直接スタイリングを行ってしまおうという考えで、今までのCSS設計のアプローチと全く真逆とも言えます。 そのため、ひとつの要素に追加された膨大なクラス名を見ると、カスタマイズしにくいと感じるひとも多いようです。 そんなときは、Tailwind.cssで利用可能なUIデザインのHTMLスニペットを集めた便利ライブラリFlowriftを活用してみましょう。 ヘッダーやフッター、ナビメニューといった基本から、ヒーローイメージ、CTA、サービス、お問い合わせフォーム、値段表、ギャラリー、404ページといったホームページ制作でよく利用するUIコンポーネントのコードをボタンひとつでコ
VTeacher 所属の Satomi です。 ※各項目をできるだけ3行以内にまとめています。 （出来る限り短く説明するReactJS入門 に合わせて書いています） 昨年（2021年）くらいから Tailwind CSS の話題が増え出し、最近はReactと一緒に使われる場面が増えてきたと思います（私も昨年から使い始めました）。 Vercel Next.js as the React framework / NextAuth.js for authentication Vercel for deployment PlanetScale as the database (MySQL) Prisma as the ORM for database access Tailwind for CSS styling 👈 本投稿は、React + Tailwind CSS の基礎知識をさらっと確認で
こんにちは、たかとーです。 今日はTailwind CSS Resources you wish you had. - DEV Community 👩💻👨💻の日本語訳記事です！ 当記事は、Janeさんの許可を得て翻訳しています。Tweet Tailwind CSS Resources you wish you had. Tailwind CSS リソース 私が学んでいたときに役に立ったいくつかのリソースをリストアップしていきます。それらをあなたのリストに追加したり、すでにある場合は、それらを使い続けてください。 1) TailwindInk ブランドカラーを選ぶと、補色のリストを生成してくれるカラージェネレーターサイトです。カラーコードはTailwindのconfigファイルに簡単にコピーすることができます。 2) Tailblocks この素晴らしいプロジェクトはMert C
2024-03-27に行われたFindy『フロントエンド技術選定 ~ゼロランタイムCSS in JSとTailwind CSS編~』の登壇資料です https://findy.connpass.com/event/312625/
元記事(英語): My Neovim setup for React, TypeScript, Tailwind CSS, etc こんにちは、個人アプリ作家のTakuyaです。 Vim歴はかれこれ10年以上です。 僕はInkdropというMarkdownノートアプリを独りで開発しています。 このアプリはElectronやReact Nativeで組まれており、マルチプラットフォームで動作します。 それらはいつもNeovimを使って開発しています。 約２年前に自分のNeovimで使用しているプラグインについて紹介しました。 あれから結構アップデートしたので改めてまた書きます。 主な違いは設定がLuaで書かれている点です。 また、vim-plugからPackerに移行しました。 ちなみにYouTubeでM2 MacBook AirにNeovimをセットアップする動画を投稿しましたので、併せて
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
【2024年】React, Tailwind CSSでメルカリクローンサイトを作ろう【入門】
色々書き比べた結果Tailwind CSSにしたという話 - Qiita
CSSを書くのが劇的に楽になる！ユーティリティファーストのCSSフレームワーク「Tailwind CSS」
ユーティリティーファーストとTailwind CSSのススメ - Qiita
Tailwind CSSの入門に！コピペで簡単に利用できるUIコンポーネントのまとめ
『Tailwind CSS実践入門』 出版記念基調講演
Tailwind CSSですぐに実装できるUIコンポーネントのまとめ -tailblocks
Tailwind CSS を使う時に一緒に入れたいライブラリ
Utility-first CSS(Tailwind CSS)が合理的であることの説明と、CSSによるUI開発小史
Tailwind CSSを本気でカスタマイズする方法
Tailwind CSSの二面性、デザインシステムを借りるということ | Marginalia
それでも私がTailwind CSSではなく、CSS Modulesを推す理由 - Qiita
ウソみたいに簡単！ Tailwind CSSのみを使用してMasonryレイアウトを実装する方法
Tailwind CSSでデザインシステムを構築する［前編］ ～「契約」としてのデザインシステム | gihyo.jp
Tailwind CSSで実装されたUIコンポーネント・ページテンプレート、商用プロジェクトで無料のものをまとめました
【TypeScript】Next.js + Tailwind CSSを使用してさくっとSPAを作る方法
Tailwind CSS v3.0 - Tailwind CSS
最小手数で始めるTailwind CSS - メドピア開発者ブログ
Preline UI, crafted with Tailwind CSS
全米が待ち望んでいた超便利なTailwind CSSツール10選 - Qiita
Tailwind CSS製UIデザインのHTMLコードをコピペできるFlowrift（便利ツールまとめも公開）
出来る限り短く説明する React + Tailwind CSS 入門（忙しい人向け）
全米が待ち望んでいた超便利なTailwind CSSツールリスト
デザインシステムで Tailwind CSSとCSS in JSに分散投資をしたら良かった話
vim沼: NeovimのReact、TypeScript、Tailwind CSS用セットアップ