Zenn
🧲

【TailwindCSS】Next.js & TypeScript & TailWindCSSでのセットアップMEMO

2022/01/14に公開
Next.js
React
TypeScript
Tailwind CSS
tech

忘れないようにメモメモ。。
​

1.Next.jsで始める

(1)npm init next-app directory-name
directory-nameは、任意の名前。
​
※localhost3000を変えたい場合

package.json
"script"{
- "dev":"next dev"
+ "dev":"next dev -p 1000"

​
(2)yarn dev
localhostが立ち上がれば、おっけっけ！

​

2. TypeScript導入

(1)yarn add --dev typescript @types/node @types/react @types/react-dom
​
(2)pages内のjsファイルを"tsx"に変更
​
(3)一度、yarn devを終了し、再起動。
tsconfig.jsonファイルが出来きたら、おっけっけ！
​

2-1. prettierの設定　(；はいらないので消したいのと、tabの幅を2に)

(1).prettierrc　作成

.prettierrc
{ "semi": false, "trailingComma": "all", "singleQuote": true, "printWidth": 100, "tabWidth": 2 }

​

3. TailwindCSS

(1)yarn add tailwindcss@npm:@tailwindcss/postcss7-compat @tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9

(2)yarn tailwindcss init -p

(3)tailwind.config.jsを以下に変更

tailwind.config.js
module.exports = {
  content: [
+  "./pages/**/*.{js,ts,jsx,tsx}",
+  "./components/**/*.{js,ts,jsx,tsx}",
  ],
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

(4)globals.cssにtailwindを追加

globals.css
@tailwind base;
@tailwind components;
@tailwind utilities;

html,
body {

(5) yarn dev

(6) index.tsxをtailwindでスタイルして反映されれば成功

index.tex
return (
    <div>
      <main>
+        <h1 className="text-5xl font-bold underline">Hello world!</h1>
      </main>
    </div>
  )
}

参考：https://tailwindcss.com/docs/guides/nextjs

5. おわり！

あとは、Githubで、リポジトリを作成して、案内通りに
git init
git add -A
git commit -m "first commit"
git branch -M main
git remote add origin url
git push -u origin main

Discussion