Next.jsにTailwindCSSをインストールしたい
この記事は最終更新日から1年以上が経過しています。
![](https://firebasestorage.googleapis.com/v0/b/webdevelopers-1886f.appspot.com/o/images%2Ftailwindcss.png?alt=media&token=d4d1e7a0-c3c6-49bd-a9aa-7c3e6369b293)
CSSは一切書かずにサイトを構築しようと思い、tailwind cssをインストールしてみることといたしました。
今回はこちらのリンク(https://tailwindcss.com/docs/guides/nextjs)を参考にチャレンジしました。
まずはインストールから
私はNext.jsのversion12なので以下のコマンドを叩きました。
$ npm install -D tailwindcss@latest postcss@latest autoprefixer@latest
次に、以下コマンドでtailwind.config.jsファイルとpostcss.config.jsファイルを生成します。
$ npx tailwindcss init -p
tailwind.config.jsファイルとpostcss.config.jsが作成されました。
次は、build時に未使用のtailwind.cssを除去(ツリーシェイク)するため、
tailwind.config.jsに追記します。
module.exports = {
content: ['./pages/**/*.{js,ts,jsx,tsx}', './components/**/*.{js,ts,jsx,tsx}'], // 追記しました。
theme: {
extend: {},
},
variants: {
extend: {},
},
plugins: [],
}
設定は以上になります。
ではNext.jsからtailwind cssを読み込みたいと思います。
pages/_app.jsのimport '../styles/globals.css'を
import 'tailwindcss/tailwind.css'に書き換えます。
// pages/_app.js
import 'tailwindcss/tailwind.css' // 書き換えました
function MyApp({ Component, pageProps }) {
return <Component {...pageProps} />
}
export default MyApp
globals.css
にtailwindをimportする方法でもOKですが、今回はノーcssでのサイト構築を目指していますので、<code class="inline-code">_app.js</code>にimportをする方法にいたしました。
ではサンプルコードをindex.jsxに仕込みます。
tailwindのclassを使ってボタンを仕込みました。
// ./pages/index.jsx
import Head from 'next/head'
import Image from 'next/image'
export default function Home() {
return (
<div>
<Head>
<title>Create Next App</title>
<meta name="description" content="Generated by create next app" />
<link rel="icon" href="/favicon.ico" />
</Head>
<main>
<button className="focus:outline-none text-sm w-24 py-3 rounded-md font-semibold text-white bg-blue-500 ring-4">ring-4</button>
</main>
</div>
)
}
では起動します。
$ npm run dev
![](https://firebasestorage.googleapis.com/v0/b/webdevelopers-1886f.appspot.com/o/images%2F%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202021-12-01%2012.40.54.png?alt=media&token=a0fe9dbf-3f8e-45d3-86f1-f96024b9a3c1)
お!
無事に上記のボタンが表示できました!
ノーcssでのサイト構築を目指して頑張ります。
お読みいただきありがとうございました!