tailwind CSSが大人気ですね！
単一責任の原則でCSSの管理から解放されます。
tailwind CSSはユーティリティファーストなのでボタンを装飾するのにもたくさんのクラスをつける必要があります。
慣れていないとクラス名を調べる回数が多くなり、時間がかかります。
tailwind CSSに慣れている方でも慣れていない方でも時間を節約できるツールをご紹介します。
tailwind components – コンポーネント集
ボタン、フォーム、ナビゲーション、カード、ウィジェット、テーブル、ページのtailwind CSSで装飾されたコンポーネントをコピペで使えます。
https://tailwindcomponents.com/
Tailwind Toolbox – コンポーネント集
tailwind CSSで装飾されたテンプレートやコンポーネントがコピペで使えます。
https://www.tailwindtoolbox.com/
Tailwind CHEAT SHEET
tailwind CSSの公式ページでクラス名を探すより、少し慣れてきたらTailwind CHEAT SHEETでクラス名を探すほうが早いです。
https://nerdcave.com/tailwind-cheat-sheet
Kometa UI Kit – コンポーネント集
ナビ、ヘッダー、フューチャーなどのコンポーネントが準備されています。
https://kitwind.io/products/kometa/
Tail-kit – コンポーネント集
Tail-kit はコンポーネントが豊富です。
tailwind PLAY – playground
ブラウザ上でtailwind CSSを書いたら即時に反映されてテストできます。
Hypercolor – カラージェネレーター
tailwind CSSを使ったグラデーションをコピペで使えます。
Wicked Templates – テンプレート集
Wicked Templatesはtailwind CSSを使ったテンプレートに特化したサイトです。
有料のテンプレートが多いですが、無料のテンプレートもあります。
https://www.wickedtemplates.com/
TailwindInk – カラージェネレーター
TailwindInkはtailwind CSSの高機能カラージェネレーターです。
カラーパレットだけでなくトーンカーブでも色を調整できます。
Contextを選べばサンプルを見ながら色を選べます。
Tailwind CSS IntelliSense – VScode エクステンション カラーサジェスト
Tailwind CSS IntelliSenseはVScodeのエクステンションです。
tailwind CSSのカラークラスをサジェストしてくれて、色を選ぶ手間が省け舞うs。
https://marketplace.visualstudio.com/items?itemName=bradlc.vscode-tailwindcss
Tailwind.run() – playground
Tailwind.run()はtailwind cssを使ってスタイリングしたHTMLをすぐにプレビューで見ることができます。
各デバイスのサイズにかんたんに変更してレスポンシブをチェックすることがあります。
Meraki UI – コンポーネント集
Meraki UIはモダンなコンポーネントが用意されています。
AlertやCardなどのコンポーネント数は108あります。
https://merakiui.com/components/
lofiui – コンポーネント集
lofiuiはカラムチャートやプロジェクトボード、チャットなどのちょっとこだわったコンポーネントがたくさんあります。
TAILBLOCKS – コンポーネント集
TAILBLOCKSはサイドバーのコンテンツを選んでサイトを作ると、そのサイトのソースを見ることができます。
ノーコードの要素があってとても使いやすく、爆速でサイトを作成することができます。
TailwindTemplates – コンポーネント集
TailwindTemplatesはboostrapのように各コンポーネントが用意されているので、組み合わせて使います。
TAILWIND STARTER KIT – コンポーネント集
のコンポーネントが用意されていますが、特徴は
- CSS COMPONENTS
- VUE.JS COMPONENTS
- REACT.JS COMPONENTS
- ANGULAR.JS COMPONENTS
- JAVASCRIPT COMPONENTS
それぞれで用意されていることです。
https://www.creative-tim.com/learning-lab/tailwind-starter-kit/presentation
Shuffle – テンプレートエディター
Shuffleはノーコードでサイトを作るようにしてtailwind CSSで作られたサイトのサンプルをコードを取得することができます。
Shuffleでサイトのたたき台を作ってカスタマイズすると爆速で1ページできあがります。
TailwindCSS Page Creator – テンプレートエディター
TailwindCSS Page Creatorはノーコードのようにブロックを積み上げていくとtailwind CSSで作られたページが出来上がります。
そのページのHTMLをコピーしてカスタマイズをしたら爆速で１ページ出来上がります。
Heroicons – アイコン集
Heroiconsはtailwind cssでサイズ調整されたSVGをコピーできます。
以下にコピーしたSVGのコードを載せておきます。
<!-- academic-cap -->
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M12 14l9-5-9-5-9 5 9 5z"></path><path d="M12 14l6.16-3.422a12.083 12.083 0 01.665 6.479A11.952 11.952 0 0012 20.055a11.952 11.952 0 00-6.824-2.998 12.078 12.078 0 01.665-6.479L12 14z"></path><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 14l9-5-9-5-9 5 9 5zm0 0l6.16-3.422a12.083 12.083 0 01.665 6.479A11.952 11.952 0 0012 20.055a11.952 11.952 0 00-6.824-2.998 12.078 12.078 0 01.665-6.479L12 14zm-4 6v-7.5l4-2.222"></path></svg>
<!-- adjustments -->
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6V4m0 2a2 2 0 100 4m0-4a2 2 0 110 4m-6 8a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4m6 6v10m6-2a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4"></path></svg>
コメント