次の風のCookie 2を設定する方法.JS 10

2020年の最後の数ヶ月で、いくつかの偉大なフレームワークの更新がリリースされている.最初にリリースされたNext.js 10 , これは、自動的に画像を最適化する新しいイメージコンポーネントのような素敵な機能の多くが付属しています.
第2に、1.0リリースの18ヵ月後に、Tarwindチームはリリースしましたv2.0 CSSフレームワークです.この新しい更新プログラムのような改善の多く含まれてnew color palette and dark mode support .
次の最新バージョンを使用します.Toowind CSSを使用したJSは、非常に強力な組み合わせを作成し、スタイルのWebアプリケーションを作成します.新しいプロジェクトを設定するステップを歩きましょう.

新しい次を開始します.JSプロジェクト
インストールしたとするYarn , 端末を開き実行するyarn create next-app あなたのプロジェクトフォルダで.
次のメッセージが表示されます.

What is your project named?

名前を入力、ヒットを入力し、あなたのプロジェクトが準備されるまで待ちます.次に、型cd <your-project-name> あなたが実行することができるそのディレクトリの中にいることを確認するにはyarn dev 開発サーバーを起動します.今すぐあなたの新しい次を持つ必要があります.JS 10プロジェクト.

Tailwindとその依存関係をインストールする
Cookieはプラグインを内蔵していますPostCSS , JavaScriptを用いたCSS変換ツールV 2.0は最新のPostcssリリースのために更新されましたpostcss and autoprefixer Peace風と一緒にピア依存関係として.
Trewindを追加し、PostgreSQLをインストールします.

yarn add tailwindcss postcss autoprefixer

設定ファイルの作成
我々は、Aを加える必要がありますtailwind.config.js とpostcss.config.js ファイルをアプリケーションのルートにします.次のコマンドを使用して設定します.

npx tailwindcss init -p

これはtailwind.config.js プロジェクトのルートファイル
Tarwindの設定についてconfiguration documentation .
また、作成するpostcss.config.js 含むファイルtailwindcss and autoprefixer 設定:

CSSをインポートする
を作成しましょうstyles CSSファイルからのフォルダとインポートの風のcss

touch styles/tailwind.css

内部tailwind.css :

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

グローバルCSSを次へ追加する.JSアプリは、デフォルトをオーバーライドする必要がありますApp コンポーネント.で次へ.JS 10、既に持っているはずです_app.js あなたのページフォルダの中に.次に作成したスタイルシートをインポートします.

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

クール、今すぐに我々のホームページにいくつかの風変わりなCSSマジックを追加する準備が整いました.移動する/pages/index.js (or /pages/index.tsx あなたがtypescriptを使用するならば、風上のCSSクラスで若干の要素を加えてください.例えば、
ランyarn dev あなたのアプリを参照してくださいhttp://localhost:3000 あなたのブラウザで.

設定する
Cookwind CSSの問題は大きなファイルサイズですがPurgeCSS これは修正できます.Purgecssは、あなたのHTMLをスキャンして、使われないどんなクラスも取り除くことによって、ファイルサイズを減らします.開発中であれば、ビルドプロセスを実行することなく、任意のテールウインドCSSクラスを使用することができます.
今すぐ風下CSSのV 2では、purgecssが既に含まれています.あなたがしなければならないすべてはtailwind.config.js Toowind風の木は、生産ビルドで未使用のスタイルを振ることができます.次のようなファイルを更新します.
今のところ、我々は内部のすべてのコードをチェック.js, .jsx, .ts or .tsx どちらかに住んでいるファイルpages/ or components/ フォルダ.他のフォルダにHTMLを追加する場合はcontainers/ または何か、この設定ファイルにそのフォルダーを追加してください.
あなたはTruwindからガイドを読むことができますoptimizing for production 木の詳細については、最高のパフォーマンスのための未使用のスタイルを振る.

結論
今、我々は次の最新バージョンで動作する準備が整いました.バンドルのサイズについて心配することなく、JSと尾風CSS!
それだ!読書ありがとう.それが役に立つことを願っています.
あなたの次のプロジェクトで時間を節約することに興味があるならばServerless SaaS , 反応開発者のためのSaaSスターターキットまた、私に従うことができますjakeprins.com .