Tailwind CSS

かれこれ5年来くらいの Spotify 有料ユーザです。さて、Spotify でディグった知らない音楽が良かったとき、メモったり SNS に流したりしようとしてアプリから曲名やアーティスト名等のテキストをコピペするのって、けっこう面倒じゃないですか？そんなフラストレーションが積もり積もって Spotify API 経由でアルバム情報を取り寄せて表示するだけのウェブアプリ作ってみたです。設計・実装面での概要はこんな感じ。 Vue3 + Tailwind CSS + daisyUI で開発。バックエンド不要のフロントエンド 100% な SPA。 Spotify API の認証認可は、OAuth2…

この記事は虎の穴ラボ Advent Calendar 2024の 20 日目の記事です。 こんにちは、虎の穴ラボの古賀です。 今回の記事は React や Vue などモダンな環境に対する Tailwind CSS や Atomic Design の導入の知見が得られる内容となっていますので、よろしければご覧ください。 目次 はじめに 採用理由 Tailwind CSS Atomic Design 開発ガイドライン コンポーネント単位の外部 CSS は作らない global.css には基本何も書かない カスタムコンポーネントに className 属性を使わない 任意の値は制限しない tai…

ことの発端 Laravelでページネーションを実装するためにbladeに以下のコードを書いたところ、表示がめっちゃ崩れました。 {{$items->links()}} 矢印でかっ {{$items->links()}} で自動的に生成されるHTMLを見てみたら、 flex items-center ...などのclassが設定されていますが、これらが全く効いていない様子。 あ、Tailwindを手動で入れなきゃいけないのね、と気づいたのでインストールします。 LaravelにTailwindCSSをインストールする Tailwindのドキュメントの通りにやるだけでした。 Install Tai…

Rails7以前で Tailwind CSS を使用したい場合はWebpackerを使って yarn add tailwindcss して ほげほげファイルを追加して〜〜としていたと思います。 Rails7からはWebpackerが標準ではなくなったので、導入方法が変わりました。 プロジェクト作成時に導入する方法と、既存のプロジェクトに途中から導入する方法をまとめてみました。 （今回はesbuildを使用してます。） プロジェクト作成時に導入する場合 1. rails new mofmof -j esbuild --css tailwind でプロジェクトを作成する 2. 以下を packag…

はじめに 早速ですが... :deep 機能について :deep 機能のつらいところ そんなあなたに PrimeVue PrimeVue の Pass Through 機能 Pass Through の利用方法 最後に 出典 はじめに こんにちは！ContractS株式会社の北原です。 フロントエンドのリードとして、プロジェクトの技術選定や品質保守等を担当しています。 早速ですが... みなさまは Vue 3 をお使いになられていますか？ これには、以前の Vue 2 と比較して多種多様な改善がふんだんに盛り込まれています。 2020/09/18 にリリースされてから暫く経っているので、実際の…

Carbon phpのDateTimeの拡張ライブラリ。 Tailwind CSSが反映されない 色々いじって、地道に CSSを自分で当て込めてましたが、Laravel 10 において、 Tailwind CSS を反映させるには、$ npm run devを実行している状態で $ php artisan serveを実行しないと反映されないらしい。。。 調べるのがいいですね。。。時間を溶かしてしまった。。。。が、しかし！これも初心者あるある！さっさと抜け出したい！ 入力値を維持する方法 バリデーションエラーの後、デフォルトでは、入力値が空にリセットされる それを防ぐ方法として、<input …

Tailwind CSSとは Tailwind CSSの書き方の例 Tailwind CSSのバージョン Tailwind CSSとは Tailwind CSSは、CSSフレームワークの一種で、効率的で柔軟なスタイリングのためのユーティリティ駆動のアプローチを提供します。 このフレームワークは、HTML要素に直接クラスを適用してスタイルを設定することを重視しています。以下は、Tailwind CSSの特徴やコンセプトのいくつかです：1. ユーティリティ駆動のスタイリング: Tailwind CSSでは、頻繁に使用されるスタイルに対してユーティリティクラスを提供します。 これにより、スタイルをク…