Goodbye CSS Modules, Hello TailwindCSS
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
🎊 You don't need SVG! Creating animated loaders for content with Tailwind CSS
🎊 You don't need SVG! Creating animated loaders for content with Tailwind CSS Introduction Hi, DEV friends! 😁 Today we'll talk about how to improve the UX of your project by several times by implementing just a content loader in the right format. It's not some kind of SVG or JavaScript “magic”, it's just pure HTML, Tailwind CSS built-in classes and some gradient colors. 🔥 Disclaimer: No one is
色々書き比べた結果Tailwind CSSにしたという話 - Qiita
Twitterでこういう発言を見かけまして Tailwind CSSはデザインに凝ってるサイトでは使えない こだわりが無い場合に向いている は？何いってんの？ って思ったので、自分がいろいろ試した結果、Tailwind CSSを選んだ話を書きます。 はじめに 以前、Tailwind CSSは結構いいぞって話を書いたんですが、この記事の立ち位置的にはその続きみたいなものなので、以下の記事を始めにご参照いただけるとより分かりやすいかもしれないです。 この記事では、前回記事を書いた後、個人仕事でWebサイトをGatsbyで作り、その中で、どうやってCSSを書くのが良いのか模索した結果、自分はこれを選んだっていうのを、同じUIを色々な方法で書き比べたコードを並べつつ、どうのこうの筆者の考えを述べていきます。 その仕事はほとんど筆者が「まかせてくださいよーいい感じに作りますよー。デザインそろってない
A Look at Tailwind CSS
This year, I saw a lot of hype about the popular CSS framework, TailwindCSS. I thought that I would share some thoughts and concerns regarding this UI framework. I have a bit of experience writing utility-first CSS when I started my career in the front-end a few years ago. In this article, I will share with you what I think about it. Things I found interesting You don’t need to leave your HTML The
Tailwind CSSからクラス名覚えにくさを消したらどうなる？ こうなった
Tailwind CSSはCSSフレームワークの一つで、あらかじめ用意されたクラス名を組み合わせてデザインを構成するというUtility-Firstというコンセプトが特徴です。 筆者は、Tailwind CSSの利点を活かしつつ、「Tailwind CSS特有のクラス名を覚えなければいけない」という問題を解消できないか試してみました。この記事では、その結果としてできたLightwind CSSを紹介します。 Tailwind CSSの利点と欠点 Tailwind CSSの公式サイトのサンプルを次に引用しますが、Tailwind CSSでは次のようにスタイルを記述します。 <figure class="md:flex bg-gray-100 rounded-xl p-8 md:p-0"> ... </figure> これらのクラスは次のような意味です。 md:flex → @media (m
UIキットやブロック・コンポーネント集など、Tailwind CSS使用時の参考リソース - NxWorld
UIキットやブロック・コンポーネント集など、「Tailwind CSS」を使用する際に参考になるリソースのまとめです。 既にTailwind CSSを使い慣れている人は活用することでよりスピーディに且つ楽に制作できるようになりますし、これからTailwind CSSを使う予定だけど公式のドキュメントだけだといまいちピンとこない人は、紹介するものをいくつか眺めてみると「こんな見栄えも表現できるのか」とか「この見栄えはこの組み合わせ方で再現できるか」など把握するのに役立つと思います。 Tailwind UI Tailwind CSSの作者が公開している公式のコンポーネント集です。 有償で且つすべてのコンポーネントを使用したい場合は金額が少しネックになるかもですが、300種類以上利用できる以外にもページレベルで用意されているものも利用可能になり、現時点では購入後もアップデートは無料とアナウンスさ
6 Tips for Tailwind CSS Development (with resources!)
6 Tips for Tailwind CSS Development (with resources!) In my previous post, I gave a myriad of reasons why Tailwind CSS is a great option for new and existing projects. When first starting out, it can be daunting to learn every utility class name and know what will fit the situation best in the present and future. This is why, in this post, I will give you tips that I have learned throughout my jou
Tailwind versus BEM
Spoilers! Like with so many things, the answer is “it depends.” How come? Read on. Tailwind and BEM are two approaches to writing and maintaining CSS. Comparing them is a bit like comparing apples and oranges, in that while they’re separate, they’re still fruit. This is to say that having an approach to manage your CSS—like any other code—is a good thing. Tailwind is the newer of the two, with the
Tailwind CSS v2.0 - Tailwind CSS
Almost exactly 18 months ago we released Tailwind CSS v1.0, which signalled a commitment to stability while continuing to push the boundaries with exciting new features in every minor release. Over the course of those 18 months we released nine minor versions that added features like placeholder styling, screenreader visibility, CSS grid, transitions, transforms, animations, layout utilities, inte
Composing the Uncomposable with CSS Variables – Adam Wathan
Many CSS properties are shorthands for a set of other properties, for example the margin property is a shorthand for setting margin-top, margin-right, margin-bottom, and margin-left all at once. Because the margin property decomposes into those four separate properties, it translates well to a utility class system like Tailwind CSS, where we can create separate utility classes for each property, t
Tailwind CSS: From Side-Project Byproduct to Multi-Million Dollar Business – Adam Wathan
Tailwind CSS: From Side-Project Byproduct to Multi-Million Dollar Business This was originally posted as a thread on Twitter, but I thought I'd republish it here to give it a proper home. So about a month or so ago, Tailwind cracked 10 million total installs, which given its humble beginnings, completely blows my mind. We're also about to cross $2 million in revenue from Tailwind UI, our first com
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Why Tailwind CSS
Tailwind CSS Components - 600+ Free Examples and Templates
GitHub - ben-rogerson/twin.macro: 🦹♂️ Twin blends the magic of Tailwind with the flexibility of css-in-js (emotion, styled-components, solid-styled-components, stitches and goober) at build time.
Why I Love Tailwind
Designing with Tailwind CSS: Setting up Tailwind and PostCSS
Why Tailwind CSS
Tailwind CSS Cheat Sheet
Tailblocks — Ready-to-use Tailwind CSS blocks