次のTarwindを使用します.js

24508 ワード
react tailwindcss nextjs テキストリンク
当初公開https://sergiodxa.com/articles/next-tailwind/
あなたのHTMLで使用されるユーティリティクラスのコレクションが付属しているCookieのライブラリは、カスタムCSSを記述しないほとんどの時間、それはあなたのアプリに焦点を当てることができますし、良いデザインの制約を与えるために動作します.
次.JSは、あなたが多くの機能を箱から出して、あなたがツールと構成についてあまり気にかけることなく複雑なアプリケーションをつくることができる反応メタフレームワークです、代わりに、それはあなたにあなたのアプリケーションを構築することに集中させて、あなたに大部分のもののために良いデフォルトを与えさせます.
両方のツールは、あなたのアプリケーションをユニークにし、すべての時間について同じことについて考えを停止することを気に任せるアイデアから来る.一緒にそれらを使用する方法を見てみましょう.

デモの実行

This is the final project running in CodeSandbox



次を作成します.アプリケーション
を作成します.JSアプリケーションは次のコマンドを実行します.
$ npx create-next-app my-app
これは基本的な次を作成します.既にインストールされている必要なライブラリを持つjsアプリケーションpackage.json スクリプトの構成とサンプルページ.

PostCSS設定の追加
Truwindを使用するには、あまりにもPostcssを使用する必要がありますが、ハードな要件ではありませんが、常にCDNや静的ファイルからTruwindのCSSを読み込むことができますが、PostCSSはパフォーマンスを向上させるためにいくつかの良いプラグインを追加しましょう.
$ yarn add -D tailwindcss autoprefixer @fullhuman/postcss-purgecss

  • tailwindcss - CSSライブラリ自体

  • autoprefixer - CSSのプロパティのための接頭辞を自動的にクロスをサポートするPostCSSプラグイン

  • @fullhuman/postcss-purgecss - 未使用のCSSを削除するPostcssプラグイン

    • Postcssの設定
    さあ、Postcssを設定しましょうpostcss.config.js 私たちのプロジェクトのルートではpackage.json .
    module.exports = {
  plugins: [
    "tailwindcss",
    process.env.NODE_ENV === "production"
      ? [
          "@fullhuman/postcss-purgecss",
          {
            content: [
              "./pages/**/*.{js,jsx,ts,tsx}",
              "./components/**/*.{js,jsx,ts,tsx}"
            ],
            defaultExtractor: content => content.match(/[\w-/:]+(?<!:)/g) || []
          }
        ]
      : undefined,
    "autoprefixer"
  ]
};

    Note: We need to use this syntax of using strings instead of requires due Next.js requirements.


    ここでは、Postccssにどのようなプラグインを使用したいのかを教えています.最初にPostcssをインラインで表示する必要があります@import ステートメントを実行し、次にTruewindをロードします.次に、我々が生産中であれば(これについては以下のように)、未使用のCSSをパージし、CSSを終了して最終的に結果として得られるCSSを最終的に終了します.
    なぜ生産だけでCSSをパージ?我々が開発しているならば、我々は再びどんな風にもカスタムCSSを使用することができたいです、そして、生産では、我々はCSS束のサイズを減らすために我々が使用していないクラスを取り除きたいです.
    そして、我々が最終的に生産であるとき、我々は中で我々のコードの全てをチェックしたいですpages/ and components/ , すべてのいずれか.js , .jsx , .ts or .tsx . どのクラスにマッチするかを見るには、/[\w-/:]+(?<!:)/g , これは: クラスでは、スタイルのために風が吹くものfocus , hover and active 州とメディア質問.

    次へPostScriptを加えてください.js

    Note: This is not required anymore if you are using Next.js v9.2 or greater.


    今、我々は次に言う必要があります.JSはビルドプロセスの一部としてPostcssを実行します.幸運にも私たちのために.JSチームはPostCSSを使って外部のCSSサポートを追加するための公式プラグインを維持しています.
    $ yarn add -D @zeit/next-css
    そして今、私たちはnext.config.js ファイル、これは次のカスタマイズできます.JSの設定は、通常は必要ないファイルですが、我々のケースでは、我々はそれを必要とします.
    const withCSS = require("@zeit/next-css");

module.exports = withCSS({});
    それは私たちが追加する必要があります、プラグインを必要とし、空のオブジェクトを渡してエクスポートすると、空のオブジェクトは、次に渡すことができる任意の余分な構成です.JS、我々はそれがこの時間空にさせます.

    のためのグローバルスタイルシートを作成する
    さあ、Aを作ろうstyles.css プロジェクトのルートでファイルします.
    /* purgecss start ignore */
@tailwind base;
@tailwind components;
/* purgecss end ignore */
@tailwind utilities;
    これは、このファイルに追加する必要があります.これにより、Truwindベース、コンポーネント、およびユーティリティスタイルが読み込まれます.また、Purgecssは、ベースとコンポーネントのスタイルをパージしないと言っている.

    尾風の利用
    今、我々はすべての設定と我々のstyles.css 準備は、基本的なコンポーネントを更新しましょうcreate-next-app 代わりに風を使う.
    // components/nav.js
import React from "react";
import Link from "next/link";

const links = [
  { href: "https://zeit.co/now", label: "ZEIT" },
  { href: "https://github.com/zeit/next.js", label: "GitHub" }
].map(link => {
  link.key = `nav-link-${link.href}-${link.label}`;
  return link;
});

const Nav = () => (
  <nav className="text-center">
    <ul className="flex justify-between px-4 my-4 py-1">
      <li className="flex px-2 py-1">
        <Link href="/">
          <a className="text-blue-500 no-underline text-sm">Home</a>
        </Link>
      </li>
      {links.map(({ key, href, label }) => (
        <li key={key} className="flex px-2 py-1">
          <a className="text-blue-500 no-underline text-sm" href={href}>
            {label}
          </a>
        </li>
      ))}
    </ul>
  </nav>
);

export default Nav;

    import React from "react";
import Head from "next/head";
import Nav from "../components/nav";

const Home = () => (
  <div className="text-sans">
    <Head>
      <title>Home</title>
      <link rel="icon" href="/favicon.ico" />
    </Head>

    <Nav />

    <div className="w-full text-gray-900">
      <h1 className="m-0 w-full pt-20 leading-tight text-5xl text-center font-bold">
        Welcome to Next.js!
      </h1>
      <p className="text-center my-4 text-m">
        To get started, edit <code>pages/index.js</code> and save to reload.
      </p>

      <div className="max-w-4xl mx-auto pt-20 py-auto pb-8 flex flex-row justify-around">
        <a
          href="https://nextjs.org/docs"
          className="pt-4 px-5 pb-6 w-64 text-left no-underline text-gray-800 border border-gray-400 hover:border-blue-500"
        >
          <h3 className="m-0 text-blue-500 text-lg font-bold">
            Documentation &rarr;
          </h3>
          <p className="m-0 pt-3 py-0 pb-0 text-sm text-gray-900">
            Learn more about Next.js in the documentation.
          </p>
        </a>
        <a
          href="https://nextjs.org/learn"
          className="pt-4 px-5 pb-6 w-64 text-left no-underline text-gray-800 border border-gray-400 hover:border-blue-500"
        >
          <h3 className="m-0 text-blue-500 text-lg font-bold">
            Next.js Learn &rarr;
          </h3>
          <p className="m-0 pt-3 py-0 pb-0 text-sm text-gray-900">
            Learn about Next.js by following an interactive tutorial!
          </p>
        </a>
        <a
          href="https://github.com/zeit/next.js/tree/master/examples"
          className="pt-4 px-5 pb-6 w-64 text-left no-underline text-gray-800 border border-gray-400 hover:border-blue-500"
        >
          <h3 className="m-0 text-blue-500 text-lg font-bold">
            Examples &rarr;
          </h3>
          <p className="m-0 pt-3 py-0 pb-0 text-sm text-gray-900">
            Find other example boilerplates on the Next.js GitHub.
          </p>
        </a>
      </div>
    </div>
  </div>
);

export default Home;
    我々のアプリケーションを今すぐチェックする場合は、スタイルなしでロードされますpages/_app.js インポートするファイルstyles.css .
    // pages/_app.js
import React from "react";
import App from "next/app";
import "../styles.css";

export default class TailwindApp extends App {
  render() {
    const { Component, pageProps } = this.props;
    return <Component {...pageProps} />;
  }
}
    このファイルは、私たちのCSSを一度ロードし、常にロードされることを確認します.次.JS(v 9.2から始まる)は、我々のロードの世話をしますstyles.css すべてのページでグローバルに、それを生産で簡潔にしました.
    我々が現在それを試みるならば、我々はウェブサイトを見ます.JSは付属しています.この点から、私たちはTailwindを使い始めることができます、そして、我々が望むならば、一旦我々が生産のためにビルドを展開する準備ができていて、我々が使っているCSSだけを得る準備ができています.
    mysqlマスタークリアランスから再同期
    Mariadb/Mysql binlog大全--継続的な更新