👋
Next.js + Tailwind CSS でポートフォリオを作ってみた
TailWind CSSとは
ユーティリティクラス[1]を用いたCSSのフレームワークである。
従来のCSSを用いると、コンポーネントまたはページに沿ってCSSファイルを作成する必要があったが、TailWind CSSを用いることでそれが不要となった。また、HTMLに対して直接スタイリングの定義を行うユーティリティクラスを用いるため、スタイルの設定が安易となる。
環境構築
- Next.jsアプリを作成
$ npx create-next-app new-portfolio
- tailwindcss のインストール
$ npm i tailwindcss
- Tailwind CSS の設定を行う
$ npm install -D tailwindcss@latest postcss@latest autoprefixer@latest
$ npx tailwindcss init -p
tailwind.config.js
module.exports = {
- purge: [],
+ purge: ['./pages/**/*.{js,ts,jsx,tsx}', './components/**/*.{js,ts,jsx,tsx}'],
darkMode: false, // or 'media' or 'class'
theme: {
extend: {},
},
variants: {
extend: {},
},
plugins: [],
}
defaultの状態だと、全てのクラスユーティリティがDeploy時に自動生成されるため、それを防ぐために必要なファイルのみをpurgeで指定することで、Deploy時に実際に使われているファイルのみまとめることを可能としている。
pages/_app.js
- import '../styles/globals.css'
+ import 'tailwindcss/tailwind.css'
function MyApp({ Component, pageProps }) {
return <Component {...pageProps} />
}
export default MyApp
pages/index.js
import Head from 'next/head'
export default function Home() {
return (
<>
<Head>
<title>Create Next App</title>
<meta name="description" content="Generated by create next app" />
<link rel="icon" href="/favicon.ico" />
</Head>
<h1>Hello World</h1>
</>
)
}
styles/globals.css
@tailwind base;
@tailwind components;
@tailwind utilities;
globals.css : 既存の内容を全て消して上記を記述。
$ npm run dev
$ npm run build
Tailwind CSS の使い方
上記のチートシートを用いて、styleを記述していく。
Deployしてみる
GitHubにコードをアップロード
$ cd ./new-portfolio
$ git init
$ git branch develop
$ git checkout develop
$ git add .
$ git commit -m "first commit"
$ git remote add origin https://github.com/nyaruo/my-portfolio.git
$ git push -u origin develop
$ git checkout main
$ git merge develop
Deploy
を参考に進めていく。
上記のURLに飛んで、 Import Git Repositoryの下のテキストフォームをクリック。
- Add GitHub Org or Accountを選択。
アカウント連携をして、All Repositoriesを選択し、Installを選択。
リポジトリを指定して、Inportする。
Create TeamはSkip
Configure ProjectはDefaultのままDeploy
1分ほど待って、ページが表示されていれば成功。
実際に作ったのが、以下のサイト。
作成
使用するパッケージ
npm install @fortawesome/react-fontawesome
npm install @fortawesome/fontawesome-svg-core
npm install @fortawesome/free-brands-svg-icons
npm install @fortawesome/free-regular-svg-icons
npm install @fortawesome/free-solid-svg-icons
実際に書いたコードは以下になります(制作途中)
公開ページ
完成イメージ図
-
クラス名自体が、cssのプロパティとその値をそのまま表現しているもの ↩︎
Discussion