LoginSignup
6
7

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

@ikkitang

Next.js に Tailwind CSS を導入したので作業メモとして周辺技術を解釈してみた

Posted at

前提

  • HTML・CSSのフロントエンド領域について、正直全く興味の無いバックエンドのエンジニア
  • Reactが面白くて SPAのサイトを作ってみようと勉強中
  • CSS については全く時間を掛けずに有りものでいい感じにしたい
    • Tailwind CSS ってのが何か良さそう

Tailwind CSS is 何?

https://tailwindcss.com/

CSSについては全然理解してないんですけど、Tailwind CSS は Utility first で、かつ より楽にレスポンシブデザインを書く事が出来るようにといった設計思想を持つ CSS フレームワークという事のようです。

実際のTailwind CSS を使う事のメリットについて、より具体的なコードを用いて、特に自分が 「ああ、楽そう」と思ったもの紹介してみたいと思います。 といっても、公式サイトに CORE CONCEPT というのが 紹介されているので、それを引っ張ってくるような形です。

CORE CONCEPT 1 ： Utility-First

https://tailwindcss.com/docs/utility-first

自分が知るCSSの書き方としては 以下のような感じでした。


<div class="chat-notification">
  <div> some resources.. </div>
</div>

<style>
  .chat-notification {
      display: flex;
      max-width: 24rem;
      margin: 0 auto;
      padding: 1.5rem;
      border-radius: 0.5rem;
      background-color: #fff;
      box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
  }
</style>

これが Tailwind CSS を使う事で以下のようになります。

<div class="max-w-sm mx-auto flex p-6 bg-white rounded-lg shadow-xl">
  <div> some resources.. </div>
</div>

After の方は CSS を自分で記述する必要が無くなっています。 それは、Beforeの .chat-notification で指定してたものがそれぞれ utility クラスとして Tailwind CSS側に定義されているからなのです。 ピックアップして説明するとこのような感じです。

  • display: flex; は .flex として定義
  • max-width: 24rem; は .max-w-sm として定義
  • margin: 0 auto; は .mx-auto として定義

Utilityクラスは非常に多く定義されており、それを組み合わせる事で自分でCSSを書く必要がなくなります。

CORE CONCEPT 2 ： Responsive Design

https://tailwindcss.com/docs/responsive-design

これも自分にとって、非常に大きなメリットです。

レスポンシブデザインを記述する方法として以下のようなメディアクエリを使った手法があるかと思います。

/* Small (sm) */
@media (min-width: 640px) { /* ... */ }

/* Medium (md) */
@media (min-width: 768px) { /* ... */ }

/* Large (lg) */
@media (min-width: 1024px) { /* ... */ }

/* Extra Large (xl) */
@media (min-width: 1280px) { /* ... */ }

これが、 Tailwind CSS を使う事で以下のように書くことが出来ます。

<!-- Width of 16 by default, 32 on medium screens, and 48 on large screens -->
<img class="w-16 md:w-32 lg:w-48" src="...">

上記のように定義する事で

  • smサイズ の時、 .w-16 { width: 4rem; }
  • mdサイズ の時、 .w-32 { width: 8rem; }
  • lgサイズ ( xlサイズ ) の時、 .w-48 { width: 12rem; }

というのがいい感じにあたってくれます。 これは僕みたいな、メディアクエリを使えばいい感じになるのは知ってるけど、Next.js と Next.jsから呼ばれるAPIだけ勉強したい、面倒くさい。。みたいな人にとっては非常に良いメリットです。

ここまでは、自分（バックエンドの人） にもわかりやすいメリットでした。 よりフロント方面のメリットとしては、自分がとても参考にさせて頂いている coliss.com さんのサイトを見る方がより専門的なメリットが理解出来るかもしれません。

https://coliss.com/articles/build-websites/operation/css/how-i-stopped-to-write-css.html

また、 Tailwind CSS は 周辺情報 （Component 集とか） みたいなのも非常に充実してます。

https://zenn.dev/d0ne1s/articles/c4909f32ce8fed5ac251

https://tailwindcomponents.com/

なので、 Tailwind CSS さえ導入すれば 後は Component集からコピペで持ってくればめちゃくちゃ楽にサイトを構築する事が出来そう！ っていうのが個人で使おうと思った決め手でした。

圧倒的に手を抜いていきたい

導入方法

さて、ここからは作業ログです。 PostCSS とか そういうライブラリとかが出てきてるのですが、正直それがあって何が嬉しいのかとかよくわかってないので、やった事をそのまま 備忘録として貼っておきますm(_ _)m

https://medium.com/better-programming/how-to-set-up-next-js-with-tailwind-css-b93ccd2d4164

導入前の動作環境

  • yarn create next-app とかで Next.js のプロジェクトを作成した
  • yarn add axios を導入してた
  • package.json は以下
{
  "dependencies": {
    "axios": "^0.20.0",
    "next": "^9.5.3",
    "react": "^16.13.1",
    "react-dom": "^16.13.1",
  },
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start"
  }
}

tailwindcss の導入

yarn add tailwindcss -D

これで tailwindcss のライブラリが導入されます。

npx tailwind init

次に上記コマンドを叩きます。これを実行すると tailwind.config.js が作成されます。これは、Tailwind CSS を適用するにあたって、サイト全体の設定等を記述する為のものです。

例えば さっきの レスポンシブデザインをより楽に〜、みたいな文脈で どこからどこまでを tabletとみなす、 といった ブレークポイント と呼ばれるものをカスタマイズしたりとかが可能です。

module.exports = {
  theme: {
    screens: {
      'tablet': '640px',
      // => @media (min-width: 640px) { ... }

      'laptop': '1024px',
      // => @media (min-width: 1024px) { ... }

      'desktop': '1280px',
      // => @media (min-width: 1280px) { ... }
    },
  }
}

PostCSS を導入する

Tailwind is written in PostCSS and configured in JavaScript, which means you have the full power of a real programming language at your fingertips.

Tailwind CSS は PostCSS で書かれています。 ( Tailwind is written in PostCSS の直訳。 )

PostCSS ってのは JSプラグインで CSS を変換するツールです。

PostCSS is a tool for transforming styles with JS plugins.

https://github.com/postcss/postcss

自分の言葉で言語化出来ないんですが、CSSをパースして独自のASTというものに変換した後で色々な処理を施し、出力するみたいな事が出来るようです。 例えばベンダープレフィックスを自動で付与したり、今のブラウザが解釈出来るようにトランスパイルしたりっていうのが代表であるという感じのようでした。

↓ この辺を参考にしています。

https://morishitter.hatenablog.com/entry/2015/08/03/164424

という事で PostCSS の設定ファイルを記述していきます。

touch postcss.config.js

設定ファイルを作成して、それを編集して 以下のように設定を追加します。

module.exports = {
  plugins: ['tailwindcss'],
}

また、Tailwind CSS 以外にも pluginを適用します。

https://github.com/csstools/postcss-preset-env

yarn add postcss-preset-env -D

インストールが完了したら、 また postcss.config.js を編集してプラグインを追加します。

module.exports = {
  plugins: ['tailwindcss', 'postcss-preset-env'],
}

これによって、 最新のCSSをほとんどのブラウザで適用出来るようになります。

Next.js の中で 読み込みをする

base とする グローバルCSS を定義します。

ファイルを作成して

cd /path/to/your/nextjs-root
mkdir styles
touch styles/tailwind.css

css の中身を記述します。

@tailwind base;
@tailwind components;
@tailwind utilities;

上記で グローバルCSS の定義が出来たので Next.js の中でグローバルCSSを読み込みます。

読み込みをするには デフォルトの App Component をオーバーライドする事で読み込みが可能です。

https://nextjs.org/docs/advanced-features/custom-app

touch pages/_app.js

（ ちなみに、僕は _app.jsx って名前のものを作成しました ）

_app.js の中身は以下です。

import '../styles/tailwind.css';
export default function MyApp({ Component, pageProps }) {
  return <Component {...pageProps} />;
}

これで、CSSが有効になります。

使用してみる

https://tailwindcomponents.com/component/simple-card

Component集の上記 component を表示してみたいと思います。

pages/index.jsx を以下のように編集しました。

import React from 'react';

class Index extends React.Component {
    render() {
        return (
            <div className="max-w-xs rounded overflow-hidden shadow-lg my-2">
                <img className="w-full" src="https://tailwindcss.com/img/card-top.jpg" alt="Sunset in the mountains"/>
                <div className="px-6 py-4">
                    <div className="font-bold text-xl mb-2">The Coldest Sunset</div>
                    <p className="text-grey-darker text-base">
                        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatibus quia, nulla! Maiores et
                        perferendis eaque, exercitationem praesentium nihil.
                    </p>
                </div>
                <div className="px-6 py-4">
                    <span
                        className="inline-block bg-grey-lighter rounded-full px-3 py-1 text-sm font-semibold text-grey-darker mr-2">#photography</span>
                    <span
                        className="inline-block bg-grey-lighter rounded-full px-3 py-1 text-sm font-semibold text-grey-darker mr-2">#travel</span>
                    <span
                        className="inline-block bg-grey-lighter rounded-full px-3 py-1 text-sm font-semibold text-grey-darker">#winter</span>
                </div>
            </div>
        );
    }
}

export default Index;

http://localhost/ にアクセスして確認してみます。

image.png

見事、CSSがあたっていそうです。

まとめ

取り敢えず、Component 集からいい感じに持ってこれる環境が出来たのでReactに集中してやっていき、です。

PostCSS とかいろんな概念がドンドンでてくるので、まだあんまりわかってないんですけど、学んでいきたいですね〜。

6
7
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
6
7

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?