並び順

ブックマーク数

期間指定

  • から
  • まで

1 - 9 件 / 9件

新着順 人気順

"Tailwind CSS"の検索結果1 - 9 件 / 9件

  • 【個人開発】最新のNext.js+NextAuth.js+prisma+microCMSでECサイト作ってみた【フルスタックアプリケーション】 - Qiita

    【個人開発】最新のNext.js+NextAuth.js+prisma+microCMSでECサイト作ってみた【フルスタックアプリケーション】TypeScriptフロントエンド個人開発Next.jsprisma はじめに 皆さんこんにちは、mamiなのだ! 今回はバックエンドは作らずにNextAuth.jsやprisma、microCMSなどを利用してNext.jsでECサイトを作成してみたので、その方法や手順などを公開しつつ、認証周りや大型開発案件でも採用されるstorybookなどについても解説していこうと思うのだ! フロントを勉強し始めた初学者さんや、フロントがメインではないバックエンドエンジニアの方に向けて、丁寧に解説を挟みながら書いていくので「へ〜フロントってこんな感じのことやってるんだ〜」と思ってくれたら嬉しいのだ! ちなみにこの記事は丁寧に解説しすぎて死ぬほど長くなってしまっ

      【個人開発】最新のNext.js+NextAuth.js+prisma+microCMSでECサイト作ってみた【フルスタックアプリケーション】 - Qiita
    • Tailwind CSS を使う時に一緒に入れたいライブラリ

      Tailwind CSS はすべてをユティリティクラスで書くという特性上、HTML にはクラスがたくさん書かれることになります。1 つの要素に対してクラスがたくさん並んでいると、視覚的にどのようなスタイルが適用されているのかを把握するのが難しくなります。条件によってクラス名を付け替える処理を行っていると更に複雑になります。 <button className={` ${variant === "primary" && "border border-blue-500 bg-blue-500 text-white"} ${ variant === "secondary" && "border border-gray-500 bg-gray-500 text-white" } ${variant === "default" && "border border-gray-500 bg-white

        Tailwind CSS を使う時に一緒に入れたいライブラリ
      • Tailwind CSSでデザインシステムを構築する[前編] ~「契約」としてのデザインシステム | gihyo.jp

        2024年1月26日発売の『Tailwind CSS実践入門』の第9章「ユーティリティファーストでデザインシステムを構築する」の一部を、前後編の2回に分けて掲載します。ユーティリティファーストというTailwind CSSの発想を活かしたデザインシステム構築の最初の一歩をまとめたものです。開発者がデザインルールをTailwind CSSの設定に落とし込む過程はもちろん、デザイナーが開発者とどのように協力しあうべきかについても論じています。 本記事の内容は、書籍の最終章に当たる部分です。ほかの章の内容に言及していたり、書籍内ですでに使われた用語が説明なく登場したりするのを防ぐため、書籍の原文から一部を変更しています。 一般的には、デザインシステムとは一貫したデザインや操作性でWebサイトやアプリケーションを提供するためのガイドラインの集まりと理解されます。使われ得る色のパレットや可能なスペー

          Tailwind CSSでデザインシステムを構築する[前編] ~「契約」としてのデザインシステム | gihyo.jp
        • 商用利用無料! コピペで簡単に実装できる、Tailwind CSSで実装されたUIコンポーネントが150種類以上! -Mamba UI

          Webサイトやスマホアプリでよく使用されるUIコンポーネントとテンプレートをTailwind CSSベースで実装したコレクションを紹介します。 コードはHTMLとVueとJSXに対応しており、Tailwind CSSを用意しておけばコピペで簡単に利用できます。 Mamba UI Mamba UI -GitHub Mamba UIの特徴 Mamba UIの使い方 Mamba UIのコンポーネント Mamba UIの特徴 Mamba UIは、Webサイトやスマホアプリによく使用されるUI要素をTailwind CSSベースで実装したオープンソースのコレクションです。すべてのコンポーネント・テンプレートはHTMLとCSSで実装されており、Tailwind CSSのおかげで複雑なCSSルールを記述する必要はありません。 Tailwind CSSはユーティリティファーストのCSSフレームワークなので

            商用利用無料! コピペで簡単に実装できる、Tailwind CSSで実装されたUIコンポーネントが150種類以上! -Mamba UI
          • デザインシステムで Tailwind CSSとCSS in JSに分散投資をしたら良かった話

            2024-03-27に行われたFindy『フロントエンド技術選定 ~ゼロランタイムCSS in JSとTailwind CSS編~』の登壇資料です https://findy.connpass.com/event/312625/

              デザインシステムで Tailwind CSSとCSS in JSに分散投資をしたら良かった話
            • Tailwind CSSでデザインシステムを構築する[後編] ~デザイントークンを定義するときに何を議論すべきか | gihyo.jp

              Tailwind CSSでデザインシステムを構築する[後編] ~デザイントークンを定義するときに何を議論すべきか 2024年1月26日発売の『Tailwind CSS実践入門』の第9章「ユーティリティファーストでデザインシステムを構築する」の一部を、前後編の2回に分けて掲載します。ユーティリティファーストというTailwind CSSの発想を活かしたデザインシステム構築の最初の一歩をまとめたものです。開発者がデザインルールをTailwind CSSの設定に落とし込む過程はもちろん、デザイナーが開発者とどのように協力しあうべきかについても論じています。 本記事の内容は、書籍の最終章に当たる部分です。ほかの章の内容に言及していたり、書籍内ですでに使われた用語が説明なく登場したりするのを防ぐため、書籍の原文から一部を変更しています。 前回の記事の最後で、デザインシステムを構築する際にコンポーネン

                Tailwind CSSでデザインシステムを構築する[後編] ~デザイントークンを定義するときに何を議論すべきか | gihyo.jp
              • Webサイトでよく使用されるUIコンポーネントをコピペで簡単に実装できる -IndieUI

                Webサイトでよく使用されるグリッド、カード、ボタン、ヘッダ、セパレータなどのUIコンポーネントをコピペで簡単に実装できるコードをまとめたIndieUIを紹介します。 たとえばボタンだと、基本となるベースのボタンをはじめ、シンプルなものからトレンドを取り入れたもの、きらめき効果や光沢感やグラデーションをアニメーション化したボタンなどが揃っています。 Indie UI Indie UI -GitHub IndieUIの特徴 IndieUIで実装したUIコンポーネント IndieUIの使い方 IndieUIの特徴 IndieUIはWebサイトでよく使用されるUIコンポーネントを迅速かつ最小限の労力で構築するのに役立つコードをまとめたサイトです。コードをコピペするだけで簡単に実装できます。 IndieUIのUIコンポーネントには、シンプルなものからトレンドを取り入れたものまで揃っており、必要に応

                  Webサイトでよく使用されるUIコンポーネントをコピペで簡単に実装できる -IndieUI
                • 既存プロジェクトを Tailwind CSS に段階的にマイグレーションする方法

                  not Tailwind CSS プロジェクトを Tailwind CSS に移行する機会があったのでアプローチを紹介します。 ポイント ベースが16px ではない場合、tailwind-pixel-perfect-preset で rem to px を行い、 Taiwlind CSS のサイズ指定(h-4など)を踏襲する tw- prefix をつけて既存スタイルの競合を回避する Tailwind CSS のノーマライズスタイルを無効にして既存スタイルへの影響を回避する ノーマライズスタイルをスコープ化して既存スタイルへの影響を防ぎつつ Tailwind CSS 正確なスタイルを実現する import { isolateForComponents, scopedPreflightStyles, } from "tailwindcss-scoped-preflight"; /** @ty

                    既存プロジェクトを Tailwind CSS に段階的にマイグレーションする方法
                  • Tailwind CSSの基本的な使い方から実践的なテクニックまでしっかりと学べる一冊 -Tailwind CSS実践入門

                    ※本ページは、アフィリエイト広告を利用しています。 Tailwind CSSは好き嫌いが分かれるフレームワークだと思いますが、Tailwind CSSを採用しているWebサイトは確実に増えてきました。 Tailwind CSSのユーティリティファーストでどのようにマークアップするのか、ユーティリティクラスを用いたコンポーネント設計、基本的な使い方からテーマのカスタマイズやプラグインなど実践的なテクニックを詳しく解説した解説書を紹介します。 本書は、CSSのフレームワーク「Tailwind CSS」の解説書です。Tailwind CSSについては導入方法からていねいに解説されていますが、HTMLやCSSの基礎知識は解説されていません。すでにHTMLやCSSを使用して実際にWebサイトを構築している人向けです。 Tailwind CSSをこれから使用してみたい、すでに使用していてより良い使い方

                      Tailwind CSSの基本的な使い方から実践的なテクニックまでしっかりと学べる一冊 -Tailwind CSS実践入門
                    1