Next.js tailwind 導入備忘録

インストール

yarn add -D tailwindcss postcss autoprefixer postcss-nested

• tailwindcss
• postcss
• autoprefixer

設定ファイルを作成

yarn tailwindcss init -p

• tailwind.config.js
• tailwind.config.js
  が作成される。

tailwind.config.js

/** @type {import('tailwindcss').Config} */
module.exports = {
  mode: 'jit',
  content: [
    "./src/pages/**/*.{js,ts,jsx,tsx}",
    "./src/components/**/*.{js,ts,jsx,tsx}",
 
  ],
  options: {
      // https://purgecss.com/safelisting.html#patterns
      safelist: {
        standard: [/^bg-/, /^text-/],
      },
    },
  theme: {
    extend: {},
  },
  plugins: [],
}

globals.css

@tailwind base;
@tailwind components;
@tailwind utilities;

ESLint Prettier設定

$ yarn add -D eslint-plugin-tailwindcss prettier-plugin-tailwindcss

prettier.config.js

module.exports = {
  plugins: [require('prettier-plugin-tailwindcss')],
}

cssの適用

index.tsx

import '../styles/globals.css'