話題のゼロランタイムなCSS-in-JSライブラリ「Panda CSS」をNext.jsに導入してみた
Panda CSSとは はじめに、今回のメインテーマとなるPanda CSSについて簡単に紹介します。 CSS-in-JS with build time generated styles, RSC compatible, multi-variant support, and best-in-class developer experience Panda CSSとは、上記公式サイト冒頭にもあるようにパフォーマンス面の課題をクリアしつつ、最高クラスの開発体験も両立したCSS in JSライブラリとなっています。 （最近ではNext.jsのReact Server Componentsが安定版になったこともあり）従来のようにランタイムCSS in JSを利用することが推奨されなくなってきている中、Chakra UIと同じ開発元によって、ゼロインタイムを実現したPanda CSSが新たにリリー
Next.js (JavaScript/TypeScript) に Tailwind CSS を導入する方法 | fwywd（フュード）powered by キカガク
どーも、入田 / ぐるたか @guru_taka です！ 本記事では Next.js に Tailwind CSS を導入する方法を紹介します。また、VS Code で Tailwind CSS での開発がしやすくなる Tips もまとめていますので、参考にしてみてください！ バージョン情報 node：15.11.0 react: 17.0.2 react-dom: 17.0.2 next: 11.0.1 autoprefixer: 10.2.6 postcss: 8.3.5 tailwindcss: 2.2.4 Tailwind CSS とは？ Tailwind CSS とは、ユーティリティファーストの CSS フレームワークになります。CSS フレームワークで有名な Bootstrap のように、デザインが整ったコンポーネントがあるのではなく、デザインを整えるときに便利かつシンプルな機
【Next.js＋TailwindCSS】Next.jsにTailwindCSSを導入しtailwind.config.jsでカスタマイズする - Qiita
【Next.js＋TailwindCSS】Next.jsにTailwindCSSを導入しtailwind.config.jsでカスタマイズするNext.jstailwindcsstailwind.config.jsfwywd はじめに TailwindCSSでコーディング時に同じ記述を何度も記述してしまい、汚くなってしまったので、繰り返し使用するクラスの作り方や使用したい色を設定する方法の一部をまとめました。 分かること バックグラウンドにしたい画像の定義 使いまわしたい色の定義 <h1>タグや<p>タグ等、タグの基本スタイルを登録する クラス名を設定して装飾する 環境 Next.js：11.0.2 Tailwind CSS：2.2.15 React：17.0.2 Tailwind CSS について Next.jsでtailwind.cssのプロジェクトを作成されていない方はNext.js
【Next.js + Tailwind】これを押さえればOK 最新のフロントエンド開発 - Qiita
目次 1.この記事を書くきっかけ 2.自己紹介 3.この記事を見てほしい人 4.Reactについて 5.Next.js + Tailwind cssの導入方法 6.Tailwind css 7.スクロールアニメーション 8.Next.jsのImageについて 9.おわり 10.おまけ 1. この記事を書くきっかけ fwywdという会社の１次試験でQiitaに記事を投稿するという試験があり、書くことになりました。 初めて記事を書くので、ご不明な点等があるかもしれませんが、できるだけ詳しく書いていくので、どうぞよろしくお願いいたします。 2. 自己紹介 私はhtml css を３カ月前に勉強し始めたばかりの学生です。 Tailwind css歴は２カ月程度ですが、こんな私でもfwywdの一次試験のサイト制作が合格したので、ぜひ参考にしていただければ幸いです。 3. この記事を見てほしい人 Re
React+TSプロジェクトで便利だったLint/Format設定紹介
こんにちは、よしこです。 この記事は 2020年に立ち上げたWebフロントエンド構成の振り返り の「linter/formatter」項の詳細記事です。単体でも読めますが、よければ元記事もあわせてどうぞ！ この記事では、今わたしが 株式会社ナレッジワーク というスタートアップで開発・運用しているプロジェクトにおいて便利だったLint/Format関連の設定についてご紹介していきます。 使っているのは、TSのlintのためにESLint, CSSのlintのためにStylelint, 主なファイルのformatのためにPrettierです。 ESLint pluginsとextendsだけどんなもの入れてるか載せておきます。 "plugins": [ "strict-dependencies", // 後述 "unused-imports", // 後述 ], "extends": [ "a
SPA Componentの推しディレクトリ構成について語る
こんにちは、よしこです。 この記事は 2020年に立ち上げたWebフロントエンド構成の振り返り の「Componentのディレクトリ構成」項の詳細記事です。単体でも読めますが、よければ元記事もあわせてどうぞ！ この記事では、今わたしが 株式会社ナレッジワーク というスタートアップで開発・運用しているプロジェクトにおいてうまくいっていると感じているComponentのディレクトリ構成についてご紹介していきます。 ディレクトリ構成 Componentは src/components の中にまとめていて、その下に以下の4種類の分類ディレクトリを切っています。 src/components/page src/components/model src/components/ui src/components/functional 分類ディレクトリを考えるにあたって重視したポイントは以下。 新しくco
Next.js + Tailwind CSS に Storybook を導入する方法 | fwywd（フュード）powered by キカガク
# ディレクトリ構成 # Storybook の設定ファイル .storybook ├── main.js └── preview.js # Storybook のデフォルトファイル # baseUrl が src ディレクトリの場合は /stories -> /src/stories /stories ├── Button.stories.tsx ├── Button.tsx ├── Header.stories.tsx ├── Header.tsx ├── Introduction.stories.mdx ├── Page.stories.tsx ├── Page.tsx ├── assets │ ├── code-brackets.svg │ ├── colors.svg │ ├── comments.svg │ ├── direction.svg │ ├── flow.svg │
【無料運用】Zennの投稿記事を使ったブログをNext.js, Tailwindcss, TypeScript, Vercelで構築した。
最初に Reactのチュートリアル、Next.jsのチュートリアル、TypeScriptの入門?を終えたので、そのアウトプットとして無料で運用出来るtechBlogを作成しようと思う。記事は新しくブログ用に書くとZennと分散してしまうのでZennに投稿している記事を使ってサイトをビルドしていく。その前、準備としてZennとGitHubを連携する必要があるのでまだ行っていない方はこちらの記事を参考にすると出来ます。 実際に作成したtechBlog モバイル版 デスクトップ版 techBlog：大学生だった 実際のコード 参考にしたデザイン MNW- mobile 構成 Next.js index.tsx 記事をzennの投稿を管理しているリポジトリから取得する。 TypeScriptでAPIの型を定義する。 [id].tsx コードのシンタックスハイライト、数式、テーブルを表示する。 co
レシピサービスのフロントエンドに CSS in JS を採用した話 - クックパッド開発者ブログ
こんにちは。技術部クックパッドサービス基盤グループのkaorun343です。我々のチームでは レシピサービスのフロントエンドを Next.js と GraphQL のシステムに置き換えている話 にて紹介したとおり、レシピサービスを Next.js ベースの新システムへと移行しています。今回はこの新システムの CSS の話 です。 背景 クックパッドのレシピサービスを Next.js と TypeScript で置き換えはじめた当初、CSS については Next.js に標準で組み込まれているCSS in JS ライブラリである styled-jsx を使っていました。プロジェクトが大きくなりはじめたタイミングで 「CSS の技術選定を考えなおしてもいいかもしれない」とチームの中で話し合い、改めて技術選定をしました。 技術選定 結論として、本システムでは CSS in JS ライブラリのem
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Next.jsにTailwind CSSを導入する
Next.js (JavaScript/TypeScript) に Chakra UI を導入する方法 | fwywd（フュード）powered by キカガク
next.js - Visual Studio Marketplace