次.CSSプロジェクトのセットアップ

1 .次をセットアップします.JSプロジェクト
まず、次のアプリケーションを作成し、次のコードベースを作成するコマンドを使用します.jsテンプレート.

npx create-next-app nextjs-ts-tailwind-example --use-npm --example "https://github.com/vercel/next-learn-starter/tree/master/basics-final"

コマンドが終了すると次のコードを終了します.JSは生成されるので、ディレクトリを動かして、操作をチェックしてください.

cd nextjs-ts-tailwind-example
npm run dev

2 .設定スクリプト
設定ファイルの作成

touch tsconfig.json next-env.d.ts

スクリプトを実行するために必要なパッケージをインストールします.

npm install --save-dev typescript @types/react @types/node

設定ファイルに追加

//tsconfig.json 
{
  "compilerOptions": {
    "target": "es5",
    "lib": [
      "dom",
      "dom.iterable",
      "esnext"
    ],
    "allowJs": true,
    "skipLibCheck": true,
    "strict": false,
    "forceConsistentCasingInFileNames": true,
    "noEmit": true,
    "esModuleInterop": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "jsx": "preserve"
  },
  "include": [
    "next-env.d.ts",
    "**/*.ts",
    "**/*.tsx"
  ],
  "exclude": [
    "node_modules"
  ]
}

次のenvに追加します.D . TSファイル

/// <reference types="next" />
/// <reference types="next/types/global" />

次に、以下のリポジトリを参照して各種JSファイルをTSファイルに書き換える.

mv components/date.js components/date.tsx
mv components/layout.js components/layout.tsx
mv lib/posts.js lib/posts.ts
mv pages/_app.js pages/_app.tsx
mv pages/index.js pages/index.tsx
mv 'pages/posts/[id].js' 'pages/posts/[id].tsx'
mv pages/api/hello.js pages/api/hello.ts

再書き込み後、操作をチェックします.

npm run dev

ブラウザで操作をチェックし、エラーがなければOKです.
3 .風上CSSの設定

npm install tailwindcss@latest postcss@latest autoprefixer@latest

風のCSS設定ファイルを生成します.

npx tailwindcss init -p

次に、尾風.設定.ポストcss .設定.つのファイルが生成されます.

//tailwind.config.js
module.exports = {
  purge: [], //remove this line 
  purge: ['./components/**/*.tsx', './pages/**/*.tsx','./public/**/*.html'], //add this line
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [],
}

//postcss.config.js
module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
}

Cookstyle/Globalで生成されたCSSを読むために書き直す.CSS

//styles/global.css
@tailwind base;
@tailwind components;
@tailwind utilities;

今すぐあなたは風のCSSを使用することができます!