【時間を節約】tailwind CSSで爆速開発のためのツール集

tailwind-css
スポンサーリンク
language

tailwind CSSが大人気ですね!

単一責任の原則でCSSの管理から解放されます。

tailwind CSSはユーティリティファーストなのでボタンを装飾するのにもたくさんのクラスをつける必要があります。

慣れていないとクラス名を調べる回数が多くなり、時間がかかります。

tailwind CSSに慣れている方でも慣れていない方でも時間を節約できるツールをご紹介します。

スポンサーリンク

Tailwind Templates

アラート、ボタン、カード、サーチフォーム、モーダルのtailwind CSSで装飾されたコンポーネントをコピペで使えます。

Home | Collection of Tailwindcss Templates & Components
A free collection of Tailwindcss Templates & tailwind components for rapid UI development.

tailwind components

ボタン、フォーム、ナビゲーション、カード、ウィジェット、テーブル、ページのtailwind CSSで装飾されたコンポーネントをコピペで使えます。

Tailwind CSS Components. Examples and templates
Tailwind CSS examples from components by the community. Tailwind chart, grids, inputs, forms, templates and much more

Tailwind Toolbox

tailwind CSSで装飾されたテンプレートやコンポーネントがコピペで使えます。

Tailwind Toolbox - Free Starter Templates for Tailwind CSS
Free open source Tailwind CSS starter templates to get you started quickly to creating websites in Tailwind CSS!

Tailwind CHEAT SHEET

tailwind CSSの公式ページでクラス名を探すより、少し慣れてきたらTailwind CHEAT SHEETでクラス名を探すほうが早いです。

Tailwind CSS Cheat Sheet
Cheat sheet that provides a quick, interactive reference for all utility classes and CSS properties provided by Tailwind CSS, a utility-first CSS framework.

Kometa UI Kit

ナビ、ヘッダー、フューチャーなどのコンポーネントが準備されています。

Kitwind
A marketplace of fully responsive, multi-purpose UI kits, built with Tailwind CSS, for start-ups and products of any kind.

Tail-kit 

Tail-kit はコンポーネントが豊富です。

Tailwind UI KIT – 250 components and templates for React, VueJS and Angular.
Over 200 free and open source components and templates for tailwind css to build beautiful UI. All are fully coded and work with React, Angular and VueJS.

TAILBLOCKS

TAILBLOCKSはブロックレイアウトに特化したサイトです。様々なパターンのブロックレイアウトがコピペできます。

Tailblocks — Ready-to-use Tailwind CSS blocks
Ready-to-use Tailwind CSS blocks

tailwind PLAY

ブラウザ上でtailwind CSSを書いたら即時に反映されてテストできます。

Tailwind Play
An advanced online playground for Tailwind CSS that lets you use all of Tailwind's build-time features directly in the browser.

Tailwind Grids

flex boxを使ったグリッドデザインをジェネレータで作れます。

Tailwind Grid Generator
Easily generate responsive grids for Tailwind CSS projects. All of the generated classes are based on the Tailwind defaults, just choose your settings to get st...

Hypercolor

tailwind CSSを使ったグラデーションをコピペで使えます。

Hypercolor - Tailwind CSS Gradient Palette
A curated collection of beautiful premade gradients using default colors from the Tailwind CSS color palette.

Wicked Blocks

Wicked Blocksはtailwind CSSを使ったブロックデザインに特化したサイトです。コピペできます。

WICKEDBLOCKS are a growing collection of more than 120 layout blocks and components built with Tailwind CSS V2 ready to copy-paste on your Tailwind project.
WICKEDBLOCKS are a growing collection of more than 120 layout blocks and components built with Tailwind CSS V2 ready to copy-paste on your Tailwind project.
タイトルとURLをコピーしました