Next.jsでTailwind CSSを使うための準備
/ 1 min read
Table of Contents
はじめに
Next.jsでTailwind CSSを使うための準備方法です。
方法
基本的には公式サイトの Installation に従えば OK です。
tailwindcss.com
インストール
# 新しいプロジェクトを作成して、そのフォルダへ移動$ npx create-next-app my-project$ cd my-project
# 関連するライブラリをインストール$ npm install -D tailwindcss postcss autoprefixer$ npx tailwindcss init -pコンフィグファイルの設定
# 以下の内容にします。module.exports = { content: [ "./pages/\*\*/\*.{js,ts,jsx,tsx}", "./components/\*\*/\*.{js,ts,jsx,tsx}", ], theme: { extend: {}, }, plugins: [],}
# styles/globals.css# 以下の内容にします。@tailwind base;@tailwind components;@tailwind utilities;起動
これで Tailwind CSS が使えるようになっているはずです。
$ npm run devおまけ
- 便利なチートシート
Tailwind CSS Cheat Sheet
