🐙

next.jsでscssを使ってtailwindがロードできない時の解決方法

2022/08/17に公開

Next.js

あほすぎて毎回忘れるので備考録として書いておきます

next.congig.jsに下記を追加

next.config.js

const path = require("path");
const nextConfig = {
  sassOptions: {
    includePaths: [path.join(__dirname, "styles")],
  },
  //...other config
  }
  
module.exports = nextConfig;

postcssをインストール

yarn add  postcss
# or 
npm i postcss

postcssの設定をrootディレクトリ内にpostcss.config.jsで設定

postcss.config.js

module.exports = {
  plugins: {
    tailwindcss: {},
    // 以下任意のプラグイン
    autoprefixer: {
      grid: false,
    },
  },
};

これでもダメな場合
tailwindcssの対象ファイルを設定し忘れている可能性あり

tailwind.config.jsに下記を設定

tailwind.config.js

module.exports = {
  content: ["pages/**/*.{js,ts,jsx,tsx}", "components/**/*.{js,ts,jsx,tsx}"],
  //...other config
  }

それでもダメな場合
そもそもscssを読み込んでいるか確認

_app.tsx

import "styles/hoge.scss"
//...other import

postcss-importを使用している場合下記を設定すると治る場合アリ
styles配下の任意のscssファイルでロードしているtailwindcssのimport方法を下記に変更
変更前

styles/foge.scss

@tailwind base
@tailwind components;
@tailwind utilities;

↓
変更後

styles/foge.scss

@improt "~tailwindcss/base"
@improt "~tailwindcss/components"
@improt "~tailwindcss/utilities;"

あほすぎて毎回忘れるので備考録として書いておきます

Discussion