TailwindCSSを始めようとしている人へ
TailwindCSSを始めようとしている人へ JSフレームワーク内でスタイルをどのように当てるべきかは,多く議論されるものであるが,そんな中でTailwindCSSが注目と人気を集めている様子である. それはそうと私はなかなか使うまで踏み出せなかったが,v3.0以降にようやく使ってみたので, 使い方をざっくり知りたい人 できることをざっくり知りたい人 TailwindCSSをエアプしたい人 に向けて個人的な所感と要点を書いていく. TailwindCSSをすごく簡単に classNameに特定のclassを指定することでStyleを当てていくCSSフレームワーク. 例えば,ここにあるように, bg-red-600とclassNameをつけることで,CSSのbackground-color: #dc2626;と同様のCSSプロパティを当てたことになる. 普段このように書くところを
Tailwindcssとは https://tailwindcss.com/ CSSライブラリの一種。 BootstrapやBulmaのような他のCSSライブラリと異なり、 .btnや.cardといったコンポーネント系のクラスは定義されておらず、 <b>1つのスタイルのみを変更するユーティリティ系のクラスがたくさん詰まっている</b>のが特徴。 Tailwindcssで定義されているクラスの例: .font-bold { font-weight: 700; } .rounded { border-radius: .25rem; } .hidden { display: none; } この特性がWeb開発で一体どんな効果をもたらすのか？ Web開発ではおなじみのBootstrapと比較しながら学んでいこう。 Bootstrap vs Tailwindcss : ボタンの例 Bootstra
Our frontend codebase is a single-page application powered by Create React App (CRA), written in TypeScript, and using GraphQL for the API. The existing styling approach used CSS Modules without a design system. CSS Modules are CSS files in which all class and animation names are scoped locally by default. They get compiled as part of the build step—with bundler technology like Webpack—and are nat
TailwindCSSを使いたい理由
はじめに TailwindCSSはJITモードが搭載されてからずっと使っています。 私自身、Tailwindを使うことで大幅に実装効率があがっているので、私なりのTailwindを使いたい理由を書いてみたいとおもいます。 と、そのまえに、、、 TailwindCSSを使うには学習が必要です 例えばシンプルな角丸のボタンです。 <button class="rounded border border-sky-400 text-white font-bold px-2 py-1 bg-sky-300 disabled:border-gray-300 disabled:bg-gray-300 disabled:text-gray-100">ボタン</button> <button class="○△□×○△□×○△□×○△□×○△□×○△□×○△□×○△□×○△□×○△□×○△□×○△□×○△□
背景と実施したこと TailwindCSSを使用してPCレイアウトのWebサイトのレスポンシブ対応を実装しました。 今回は静的コンテンツの配置を横並びから縦並びに変えるという内容のみ実施しています。 CSSは少し苦手意識があったのですが、TailwindCSSを使うとかなりローコストかつシンプルに記述できたので そのノウハウを主に初心者の方向けに記述していきたいと思います。 目次 概要 前提とやりたいことの整理 考え方の整理 実際のコード例 補足とまとめ 概要 TailwindCSSを使ったレスポンシブ対応の実際のコード例と考え方を初心者向けに記載するよ。 画面表示上、横並びだったものをスマホレイアウトにすると縦並びにする、という例で説明するよ。 メディアクエリの使い方とはもちろんだけど、HTMLタグの記載の順番を意識することがポイントだよ。 前提とやりたいことの整理 【前提】 + Tai
【ハンズオン】RemixでTODOアプリを作ってReactの違いを体感しよう【TypeScript/Supabase/TailwindCSS】 - Qiita
【ハンズオン】RemixでTODOアプリを作ってReactの違いを体感しよう【TypeScript/Supabase/TailwindCSS】TypeScriptハンズオンRemixtailwindcssSupabase はじめに Reactを使っていてステートがクライアントとサーバーで辻褄が合わなくなった そんな経験がReactをある程度使ったことがある人はおそらく経験したことがあるはずです。 Reactにおいて状態管理は誰でも使いやすく直感的である半面、クライアントとサーバーの状態を意識する必要が有ります。 どのタイミングでステートの変更をサーバーでも行うのか難しく思う場面もしばしばあります。 今回は最近巷でReactと並んで見かけるようになったRemixについてハンズオン形式で学べるような記事を書いていきます。 ハンズオンを通してRemixの特徴であったり、SupabaseやTail
はじめに この記事はTailwindCSSが最近流行ってるけどなんで流行ってるの？という疑問をいただいた、フロントエンドエンジニア歴3年ほどの人間が調べてわかったことをまとめた記事です。以下のようなことがわかります。 TailwindCSSとは一体なんなのか？ CSS設計とは違うの？Bootstrapなどとの違いは？ どんな背景があって流行るようになってきているのか考察 Design Systemとの相性は？ TailwindCSSとは一体なんなのか？ ものすごくざっくりまとめるとユーティリティクラスの詰め合わせのライブラリと表現できるのかなと思いました。 以下のTailwindCSSの公式ドキュメントに書いてあることについて軽くまとめます。 https://tailwindcss.com/docs/utility-first まずはコードを見てみる まずTailwindを使わない普通のH
Rewind-UI - A fully customizable React-TailwindCSS component library
Rewind-UI is a React component library that provides a set of accessible, reusable, and customizable components to help you build your next project. We've designed our components to be flexible and easy to use, so you can focus on what matters most: building great user experiences. Getting started with Rewind-UI is easy! Simply install the package using your package manager of choice, and you're r
Tailwind CSS とは 迅速かつ簡単にデザインシステムを構築するためのユーティリティ を提供するフレームワークです。 これだけではよくわかりませんね。 そこでまずは、TailwindのUtility Firstの概念を、例を交えて説明していきます。
GitHub - francoismassart/eslint-plugin-tailwindcss: ESLint plugin for Tailwind CSS usage
Learn more about each supported rules by reading their documentation: classnames-order: order classnames for consistency and it makes merge conflict a bit easier to resolve enforces-negative-arbitrary-values: make sure to use negative arbitrary values classname without the negative classname e.g. -top-[5px] should become top-[-5px] enforces-shorthand: merge multiple classnames into shorthand if po
皆さんこんにちは。株式会社バベルでエンジニアをしている uhyo です。バベルが提供しているaileadというプロダクトではスタイリングにTailwind CSSを使用しています。 恥ずかしながら、これまでTailwind CSSを十分に活用するための環境が整っていませんでした。具体的には、Tailwind CSSのクラス名を書くところにリンターが適用されていなかったり、クラスの並び順がとても自由で開発に支障をきたしたりしていました。 そこで、今回prettier-plugin-tailwindcssをコードベースに導入しました。これは、言わずと知れたコードフォーマッターPrettier向けのプラグインで、Tailwind CSSのクラス名をいい感じに並び替えることでコードに少し秩序をもたらしてくれるものです。 コードフォーマッターの原則は、コードの挙動を変えないことです。そのため、理想的
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert
目次 こんにちは、CADDi でフロントエンド エンジニアをやっている桐生です。この記事は CADDi Advent Calendar 2020 の7日目の記事になります。 昨日の記事はモリさんの あえてケイスケ・ホンダのようなデザイナーになるには でした！まだご覧になっていない方はぜひ目を通してみてください！ 本日は、最近触っている tailwindcss についてお話できればと思います。 [toc] tailwindcss とは tailwindcss は数あるCSSフレームワークの1つですが、Utility first というアプローチでスタイルを組み上げていく点がユニークで、OOCSS, BEM, SMACSS など、これまでのCSS設計アプローチとは考え方が大きく異なります。 tailwindcss では p-6, max-w-sm などの CSS class を utility
Storybookのメジャーバージョンが7にアップデートしてからしばらく経ちます。 しかしながらNext.jsとtailwindCSSの組み合わせにStorybookを使用する記事が少なかったため、 組み込むために行ったことをまとめました。 動作確認環境は以下のとおりです。 "next": "13.3", "react": "^18.2.0", "tailwindcss": "^3.3.2", "storybook": "^7.0.11", "@storybook/addon-essentials": "^7.0.11", "@storybook/addon-interactions": "^7.0.11", "@storybook/addon-links": "^7.0.11", "@storybook/blocks": "^7.0.11", "@storybook/nextjs": "
TailwindCSSのapplyは何が悪いのか
Tailwind CSS には @apply という機能がある。ユーティリティクラスをカスタムクラスの内部に「展開」するというものだ。例えば以下のようにできる。 .custom-class { max-height: 350px; &:before, &:after { content: ''; @apply block sticky left-0 right-0 -mt-2 pb-3; } } これはビルドするとこうなる。 .custom-class { max-height: 350px; } .custon-class:before, .custon-class:after { content: ''; position: -webkit-sticky; position: sticky; left: 0px; right: 0px; margin-top: -16px; displ
はじめに 最近なにかと話題のTailwindCSSですが、個人的には結構手に馴染むし、何よりもUI構造とスタイルをセットにできるところがかなり好きだったりします。 ただしTailwindCSSはその便利さゆえに自由奔放に書くことができてしまうため、無秩序なUIコンポーネントの定義ができてしまったりします。そういった状況を数々経験してきた方々は、あまりTailwindCSSをよく思わないかもしれません。 個人的には「TailwindCSSは、ルールを守って運用できれば楽しくUIコンポーネントの実装ができる」のかなと思ったりします。 今回は楽しいTailwindCSSを用いた開発を実現するために、守るべきお作法を共有できたらと思います。 個人的Tailwindcssお作法の四箇条 今回紹介したいTailwindCSSのお作法は、以下の四箇条です。 classNameは見やすさ重視で改行すべし
Recently, I was refactoring my blog using Next.js by a whim. There are 3 tech stacks I would use: Next.js , a popular React framework with SSG, SSR support naturally Tailwindcss , a low-level CSS framework with the utility-first concept. AMP , an HTML framework developed by Google to make your website fast and loading smoothly. However, There are so many restrictions in AMP for performance issues.
（2022年11月25日追記） 私の本が株式会社インプレス R&Dさんより出版されました。この記事の内容も含まれています。イラストは鍋料理さんの作品です。猫のモデルはなんとうちのコです！ 感想を書いていただけるととても嬉しいです！ （2022年8月3日追記）この記事の内容はこちらの本でも読めます。無料公開している「3章 モックアップを作ろう」に相当します。本の方がより詳しく説明しています。 はじめに 現在、とあるAPIを販売するWEBサービスをReactで作成中です。先週は環境構築を行いましたが、今週はモックの作成を進めました。TailwindCSSのUIコンポーネントを公開しているページがたくさんあるので、気に入ったデザインを選んでコードをコピペすると画面モックがサクサク作れてとても楽しいです。 コピペする前にこれを読もう コードをコピペすればきれいなデザインは再現できますが、セマンティ
viteでreact(or preact)+typescript(+tailwindcss)な開発環境を構築 | DevelopersIO
吉川@広島です。 最近viteが非常に快適でハマって（良い意味の方）おり、ReactとPreactの環境構築を試してみたので備忘録がてら紹介します。 Getting Started | Vite viteには npm init vite@latest my-vue-app -- --template vue のように自分で設定することなくscaffoldする機能があるのですが、今回はこれを使わずに構築する手順を共有したいと思います。 環境 node 15.11.0 yarn 1.22.10 npm 7.18.1 vite 2.4.4 プロジェクト作成 ディレクトリを作って入ります。 mkdir my-app cd my-app 必要パッケージのインストール react, react-dom (or preact) vite (+ @vitejs/plugin-react-refresh o
If you work in the front-end, you've probably heard a lot about TailwindCSS, a CSS library, much like Bootstrap. Much unlike Bootstrap, however, Tailwind takes a different approach - it is all "utility classes". And I am not a fan. I got a whiff of it and quickly learned the name is appropos: it was as welcome and useful as passed gas. Before we start, let me try to explain what a utility class is
タイトルの通り、Gatsby.js, TailwindCSS, Netlifyの組み合わせでフロント技術オンリーのフリー素材サイトを作ってみたので、使っている技術とサイトの紹介をしたいと思います。 Qiitaに書くかZennに書くか(同時にどちらにも投下するか)迷ったんですが、Zennにしました。 作ったものと動機 「FLAT SVG DESIGNS」というSVGアイコンやイラストを無料で配布する素材サイトを作成しました。アイコンはまだ130個ほどしかありませんが、順次追加していきます。アイコン作成からサイト作成まで全て一人でやってますので、更新はゆっくりになると思います。(1週間に10個が目標) FLAT SVG DESIGNS アイコンはこんな感じのデザインです。 ここがこだわり サイト全体でPNG形式などのラスター画像を使っているのはファビコンのみ。それ以外は全てSVGファイルで画像
Rails 7: importmap-rails + tailwindcss-railsでnode.jsが不要な理由｜TechRacho by BPS株式会社
2022.02.17 Rails 7: importmap-rails + tailwindcss-railsでnode.jsが不要な理由 Rails 7 : rails newのフロントエンド関連オプションの組み合わせを調べてみた 上の記事に書いたように、Rails 7でimportmap-railsを使う場合、node.jsは不要になり、node_modules/ディレクトリも作成されません。 # デフォルトでimportmap-railsがインストールされる $ rails new . ちょっと不思議だったのは、importmap-railsとtailwindcss-railsを組み合わせた場合にもnode.jsが不要なことです。なお、このセットアップではconfig/importmap.rbにtailwindのエントリは入らず、app/assets/builds/の下にtailwi
1. ComponentPropsを使う 多くの人が述べていますが、拡張性を高めるためにReact.ComponentPropsを使います。 import { ComponentProps, FC } from 'react' type ButtonProps = { loading: boolean } & ComponentProps<'button'> export const Button: FC<ButtonProps> = ({ loading, children, ...props }) => { return <button {...props}>{loading ? children : 'Loading...'}</button> } このようにすると、ページで用いるときにデフォルトのボタンと同じような使用感で用いることができます。 2. tailwind-mergeを
釣り針のクソデカいタイトルですが、こちらの記事はロンドンのフルスタックNode/JS/TS開発者のBrian Boykoさんが4月20日にDEV Communityに投稿した記事:TailwindCSS: Adds complexity, does nothing.の和訳となります。(6/28原文著者の掲載許可取得済み) こちらの記事を5月7日にtwitterで10万人のフォロワーを持つフロントエンド開発者でインフルエンサーのSara Soueidanさんがリツイートし、それにTailwindCSSの作者 Adam Wathanさんが反応したことで炎上。議論を巻き起こした様です。（こちらの炎上事件の詳細は: Tailwind CSS批判ブログ記事の紹介ツイートへの攻撃で作者が炎上 などでご確認ください) さてさて、日本ではフロントエンドのオピニオンリーダー的な影響力の強いエンジニアにも概ね
A tool for creating new color shades based on a neural network and trained with the Tailwindcss palette.
背景 さまざまなCSS フレームワークが登場し、最近は Tailwind CSSが注目され話題になっていたのは認識していました。そんな中、一部でChakra UIなるものの名前も見るようになり、さらにTailwind CSSと比較される書き方をされることが多いように感じ気になっていました。 また、React Developer Roadmap2021の Stylingにあり、使ってみたいと思っていたのもあります。 参考： https://roadmap.sh/react 私はReact を使用する場面が業務でも個人開発でも多いのですが、個人的にReact UserはChakra UI推しが多いように感じたのも使ってみようと思った理由の一つです。 https://www.reddit.com/r/nextjs/comments/jznkit/tailwindcss_vs_chakra_ui_
Tailwind CSS とは 迅速かつ簡単にデザインシステムを構築するためのユーティリティ を提供するフレームワークです。 これだけではよくわかりませんね。 そこでまずは、TailwindのUtility Firstの概念を、例を交えて説明していきます。
Next.js + tailwindcss + microCMS + Vercelで写真のポートフォリオサイト作ってみた - RX100で撮り歩くブログ
年末の技術の勉強もかねて簡単な写真のサイト作ってみました。 photo.mismith.me 作った理由 Next.js + microCMS next/imageが便利 tailwindcss Next.jsでtailwindcssを使う チートシート Components hover ブレイクポイント 独自のUtilityを追加 アイコン Vercel ホスティング 独自ドメイン Google Analytics さいごに 作った理由 個人の写真まとめサイトとして500pxを使っていたが、純粋に写真だけ一覧できるようなサイトが欲しかった（500pxはSNSなのでいろいろと余計なものが表示される） Next.jsやtailwindcss、Vercelなどを使いたかった（今年まったく技術追ってなかったので...） 実はWordPressで写真サイト作ってたけど、レンタルサーバー解約してコス
【無料運用】Zennの投稿記事を使ったブログをNext.js, Tailwindcss, TypeScript, Vercelで構築した。
最初に Reactのチュートリアル、Next.jsのチュートリアル、TypeScriptの入門?を終えたので、そのアウトプットとして無料で運用出来るtechBlogを作成しようと思う。記事は新しくブログ用に書くとZennと分散してしまうのでZennに投稿している記事を使ってサイトをビルドしていく。その前、準備としてZennとGitHubを連携する必要があるのでまだ行っていない方はこちらの記事を参考にすると出来ます。 実際に作成したtechBlog モバイル版 デスクトップ版 techBlog：大学生だった 実際のコード 参考にしたデザイン MNW- mobile 構成 Next.js index.tsx 記事をzennの投稿を管理しているリポジトリから取得する。 TypeScriptでAPIの型を定義する。 [id].tsx コードのシンタックスハイライト、数式、テーブルを表示する。 co
TL;DR ふと「xxx みたいなコンポーネントを作るってなるとどうすればいいんだろ？」と思うことがあるかと思います そういう時に、ささっとお試しで作れる PlayGround 的なものを用意しておきたい 「なら Storybook とかいいんじゃね？」と思ったので、導入にあたってのメモを残します とりあえず CRA Storybook を導入する前に、そもそもの基盤となるプロジェクトが必要なので CRA します。 今回は Vite プロジェクトを作成することにします。 Need to install the following packages: create-vite@4.4.0 Ok to proceed? (y) y ✔ Project name: … vitest-react ✔ Select a framework: › React ✔ Select a variant: ›
GitHub - aniftyco/awesome-tailwindcss: 😎 Awesome things related to Tailwind CSS
Awesome Tailwind CSS Tailwind CSS is a utility-first CSS framework for rapidly building custom user interfaces. Contents Useful Links IDE Extensions Plugins Tools UI Libraries, Components & Templates Starters & Themes Open-Source Projects Learning Useful Links Legend: 💙 Official resource 💙 Website - Official Tailwind CSS website. 💙 Repository - Official Tailwind CSS repository. 💙 Discussions -
TailwindCSS Buttons
TailwindCSS Buttons A unique collection of Copy & Paste TailwindCSS buttons 🙌 <a href="#_" class="relative inline-block text-lg group"> <span class="relative z-10 block px-5 py-3 overflow-hidden font-medium leading-tight text-gray-800 transition-colors duration-300 ease-out border-2 border-gray-900 rounded-lg group-hover:text-white"> <span class="absolute inset-0 w-full h-full px-5 py-3 rounded-l
大嫌いだったユーティリティーファーストCSS（TailwindCSS）と向き合った話 - Qiita
最近、業務にTailwindCSSとAstroを取り入れ始めました。 ここではそれまでの苦悩、導入までの軌跡や工夫についてご紹介します。 育った環境 私が社会人になるころにちょうどWeb標準という言葉が浸透し、「世の中はXHTMLでマークアップはセマンティックであるべし！」という価値観で育ちました。 CSSは名前の通り、カスケードするから良いものだと思っていましたし、クラス名はデザインの都合ではなく、機能や意味からつけることが幸福につながると信じていました。 当時は大量コーディングをより効率よく行うためにコマンドラインのプログラムをつくってXPathで抽出・変換し少しでも作業を軽減できないか試行錯誤したり、複数人でのコーディングをどのように効率よくまわせるか考えたり、HTMLをXMLとして捉えて、当時のXHTMLの思想に則って業務を進めていました。 XHTMLは廃れ、それほど厳格性を求めら
Alpine.js: The JavaScript Framework That's Used Like jQuery, Written Like Vue, and Inspired by TailwindCSS | CSS-Tricks
Alpine.js: The JavaScript Framework That’s Used Like jQuery, Written Like Vue, and Inspired by TailwindCSS We have big JavaScript frameworks that tons of people already use and like, including React, Vue, Angular, and Svelte. Do we need another JavaScript library? Let’s take a look at Alpine.js and you can decide for yourself. Alpine.js is for developers who aren’t looking to build a single page a
この本はSvelte + TypeScript + tailwindcssで本検索サイトを作成します。 Svelteを使ってアプリケーションを作成1から作成することができます。 以下のことが学べます。 - Svelteの基礎文法 - Svelteのルーティング - Svelteのストア HTML・CSS・JavaScriptの基礎的な理解がある人が対象です。
ComponentsAccordionAlertAvatarBadgeBreadcrumbButtonButton GroupCardCheckboxDrawerDotsDividerDropdownFormsInputInput FileNewLinkModalMenuPaginationPopoverProgressNavbarRadioRangeSpinnersNewSelectSidebarNewSkeletonSwitchStepperTabsTableTextareaTooltipKbd
TailwindCSSの導入
2022/06/27追記 本記事はTailwind CSSのv2を使用しています。 2022/06/27現在の最新バージョンはv3となっており設定等が異なる箇所がありますので、v3を利用の場合は以下のドキュメントを参照してください。 https://tailwindcss.com/docs/installation TailwindCSSは「使いやすさを優先しよう」という考え方で設計されたユーティリティファーストのCSSフレームワークです。公式ドキュメントがかなり充実していますので、こちらを参照しつつ導入部分を簡単にまとめてみたいと思います。 今回は行うことは以下のような内容です。 npmでtailwindcssをインストールする 設定ファイルを作成して簡単なカスタマイズをする Purge機能を使用してファイルの軽量化を行う TailwindCSSを利用する方法 TailwindCSSを利
GitHub - tailwindlabs/tailwindcss-forms: A plugin that provides a basic reset for form styles that makes form elements easy to override with utilities.
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert
version: "3" services: front: build: . tty: true ports: - "3000:3000" # 開発用 - "4000:4000" # 本番用 volumes: - ./app/myapp:/app # ./app/{プロジェクト名}:/app command: yarn dev Dockerfileでは、ECSなどを利用することを想定して、本番環境が構築できるコマンドを記述します。この段階では、Dockerfileは未完成であり、「10. package.json修正」で完成させます。 ベースイメージは、現段階で安定版のnode:16.14.2を利用します。 イメージを軽量にするため、alpine型を利用します。 docker-compose.ymlでは、開発環境時のコマンドを記述します。 command(CMD)は、Dockerfileと
CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Tailwindcssは素晴らしいという話 - GitPress.io
Goodbye CSS Modules, Hello TailwindCSS
TailwindCSSのレスポンシブデザイン - Qiita
TailwindCSSって何？なんで流行ってるの？｜F Lab｜Fixel株式会社
TailwindCSS入門 ~ Utility First + デザインシステムの構築 ~ - Qiita
prettier-plugin-tailwindcssを適用したらスタイルが壊れた話
GitHub - tailwindlabs/blog.tailwindcss.com
tailwindcss のコンセプトとメリットについての考察 - CADDi Tech Blog
🎨Storybook@7入門：Next.js + TailwindCSSへのステップバイステップ組み込みガイド
【提案】TailwindCSSの新お作法、一旦これにしませんか？
How to use tailwindcss with AMP in a Next.js project
ReactとTailwindCSSでモックを作るのは楽しいぞ
TailwindCSS: Adds complexity, does nothing.
Gatsby.js, TailwindCSS, Netlifyでフリー素材サイト作ってみた
TailwindCSSでコンポーネントを作成するときに意識していること
TailwindCSSは複雑性を足すだけで、何もしていない（和訳） - Qiita
Tailwind Ink | AI color palette generator for Tailwindcss
TailwindCSS と比べつつ Chakra UI に入門する - Qiita
TailwindCSS入門 ~ Utility First + デザインシステムの構築 ~ - Qiita
お試しでReact×tailwindcssでコンポーネントを作れるようにStorybookを準備する
【Svelte + TypeScript + tailwindcss】本検索サイト チュートリアル
RippleUI | TailwindCSS Components
DockerでNext.js+TailwindCSS開発環境をチーム開発を意識して構築してみた
UIツールキット「NextUI」のバージョン2.0が公開、CSSフレームワークをTailwindCSSに切り替え