tailwindcssライブラリを使ってみた

こんにちわ。nap5です。


tailwindcssライブラリを使ってみたので、紹介したいと思います。

tailwindcssライブラリはこちらになります。

Tailwind CSS - Rapidly build modern websites without ever leaving your HTML.

普段はemotionを使っているので、初めて触れたのですが、なかなか慣れるのが、大変な印象でございました。エディタはvscodeで書いているのですが、デモを書く際には以下の拡張機能をインストールして書いています。

Tailwind CSS IntelliSense

Tailwind CSS IntelliSense - Visual Studio Marketplace

書きっぷりとしてはなるたけ、tailwindcssのデフォルトのクラスをアタッチしていき、ライブラリのコンポーネントを使用しているところはemotionで個別スタイリングしていくのが、tailwindcssを使っていくときはいいのかなという感触を得ました。慣れていったら、react-bootstrapなどのベンダロックインフレームワークを使わずに個性を出せるスタイリングしていけるのではと考えています。

今回のデモサイトです。

Vite App

デモコードです。

currying-silence-34jl2d - CodeSandbox

しばらくはemotionとtailwindcssの両方でいろいろデモ作ってみようかなと思えるモックアップでした。

最近では、MENTAをはじめてみました。MENTAを使って提供していることを紹介している記事は以下になります。

また、Twitterでモックアップ動画を公開しているので、こちらもよかったら、覗いてみてください。

Tweets by napzak5

最後に、Udemyでコースを公開しました。
良かったら覗いてみてください。

https://www.udemy.com/course/count-down-up-using-javascript-animation-api/

Web標準のJavascript Animation APIを使ったインタラクティブなカウントアップダウンの作り方

また、コースの内容紹介記事は以下になります。

簡単ですが、以上です。