Tailwind CSS home page
  1. 설치
  2. Gatsby에 Tailwind CSS 설치

  1. 프로젝트 생성

    아직 프로젝트를 설정하지 않았다면 새로운 Gatsby 프로젝트를 생성하세요. 가장 일반적인 방법은 Gatsby CLI를 사용하는 것입니다.

    Terminal
    gatsby new my-projectcd my-project

  2. Tailwind CSS 설치

    npm을 사용하여 tailwindcss와 그 동반 의존성, 그리고 gatsby-plugin-postcss를 설치한 후, init 명령어를 실행하여 tailwind.config.js와 postcss.config.js를 생성하세요.

    Terminal
    npm install -D tailwindcss postcss autoprefixer gatsby-plugin-postcssnpx tailwindcss init -p

  3. Gatsby PostCSS 플러그인 활성화

    gatsby-config.js 파일에서 gatsby-plugin-postcss를 활성화하세요. 자세한 내용은 플러그인 문서 를 참고하세요.

    gatsby-config.js
    module.exports = {
  plugins: [
    'gatsby-plugin-postcss',
    // ...
  ],
}

  4. 템플릿 경로 설정

    tailwind.config.js 파일에 모든 템플릿 파일의 경로를 추가하세요.

    tailwind.config.js
    /** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./src/pages/**/*.{js,jsx,ts,tsx}",
    "./src/components/**/*.{js,jsx,ts,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

  5. Tailwind 지시어 추가

    ./src/styles/global.css 파일을 생성하고 Tailwind의 각 레이어에 대한 @tailwind 지시어를 추가하세요.

    global.css
    @tailwind base;
@tailwind components;
@tailwind utilities;

  6. CSS 파일 임포트

    프로젝트 루트에 gatsby-browser.js 파일이 없으면 생성하고, 새로 만든 ./src/styles/global.css 파일을 임포트하세요.

    gatsby-browser.js
    import './src/styles/global.css'

  7. 빌드 프로세스 시작

    gatsby develop 명령어로 빌드 프로세스를 실행하세요.

    Terminal
    gatsby develop

  8. Tailwind 사용 시작

    Tailwind의 유틸리티 클래스를 사용하여 콘텐츠를 스타일링하세요.

    index.js
    export default function IndexPage() {
  return (
    <Layout>
      <h1 className="text-3xl font-bold underline">
        Hello world!
      </h1>
    </Layout>
  )
}