Gatsby Tailwind CSS 적용하기

1. Tailwind CSS 와 PostCSS

npm install tailwindcss postcss autoprefixer gatsby-plugin-postcss

 

2. Tailwind CSS 초기화

npx tailwindcss init

tailwind.config.js 파일이 생성됨

3. PostCSS 설정

프로젝트 루트 디렉토리에 postcss.config.js 파일을 생성한다.

module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
}

 

4. Gatsby 설정파일에 PostCSS 플러그인 추가

gatsby-config.js

module.exports = {
  ...
  plugins: [
    `gatsby-plugin-postcss`,
    ...

 

5. Global Style 파일 생성 (src/tailwind.css)

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

6. Global CSS 를 gatsby-browser.js에 추가

/**
 * Implement Gatsby's Browser APIs in this file.
 *
 * See: https://www.gatsbyjs.com/docs/reference/config-files/gatsby-browser/
 */

// You can delete this file if you're not using it
import "./src/tailwind.css";

7. PurgeCSS 설정(Optional but Recommended for Production)

옵셔널이라고 되어있는데, 이게 되어야 정상 작동함.

/** @type {import('tailwindcss').Config} */

module.exports = {
  purge: ['./src/**/*.{js,jsx,ts,tsx}', './public/index.html'],
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [],
}