GatsbyJS에 Tailwind CSS V3 설치

이 섹션에서는 gatsbyjs에 tailwind css v3를 설치합니다. Gatsby는 개발자가 엄청나게 빠른 웹사이트와 앱을 구축할 수 있도록 도와주는 React 기반의 무료 오픈 소스 프레임워크입니다. 동적으로 렌더링된 사이트의 제어 및 확장성을 정적 사이트 생성 속도와 결합하여 완전히 새로운 가능성의 웹을 만듭니다.

개츠비 프로젝트 만들기
아래 명령을 실행하여 gatsbyjs를 생성합니다.

gatsby new tailwind-gatsby

프로젝트 디렉토리로 이동합니다.

cd tailwind-gatsby

Tailwind CSS 설치
gatsby에 postcss 및 tailwind css를 설치합니다.

npm install -D tailwindcss postcss autoprefixer gatsby-plugin-postcss
npx tailwindcss init -p

Gatsby PostCSS 플러그인 활성화
gatsby-config.js 파일에서 gatsby-plugin-postcss를 활성화합니다.
개츠비-config.js

module.exports = {
  siteMetadata: {
    title: `Gatsby Default Starter`,
    description: `Kick off your next, great Gatsby project with this default starter. This barebones starter ships with the main Gatsby configuration files you might need.`,
    author: `@gatsbyjs`,
    siteUrl: `https://gatsbystarterdefaultsource.gatsbyjs.io/`,
  },
  plugins: [
    `gatsby-plugin-image`,
    'gatsby-plugin-postcss',
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        name: `images`,
        path: `${__dirname}/src/images`,
      },
    },
    `gatsby-transformer-sharp`,
    `gatsby-plugin-sharp`,
    {
      resolve: `gatsby-plugin-manifest`,
      options: {
        name: `gatsby-starter-default`,
        short_name: `starter`,
        start_url: `/`,
        background_color: `#663399`,
        // This will impact how browsers show your PWA/website
        // https://css-tricks.com/meta-theme-color-and-trickery/
        // theme_color: `#663399`,
        display: `minimal-ui`,
        icon: `src/images/gatsby-icon.png`, // This path is relative to the root of the site.
      },
    },
  ],
}

템플릿 경로 구성
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: [],
}

스타일 폴더 및 global.css 만들기
./src/styles/global.css 파일을 만들고 Tailwind의 각 레이어에 대한 지시문을 추가합니다.
src/styles/global.css

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

Tailwind CSS 경로 gatsby-browser.js 가져오기
개츠비-브라우저.js

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

// You can delete this file if you're not using it
import './src/styles/global.css'

src/페이지/index.js

import * as React from "react"
import { Link } from "gatsby"

import Layout from "../components/layout"
import Seo from "../components/seo"

const IndexPage = () => (
  <div className="flex items-center justify-center h-screen">
    <h1 className="text-3xl font-bold text-purple-700">
      Install Tailwind CSS in Gatsbyjs
    </h1>
  </div>
)

/**
 * Head export to define metadata for the page
 *
 * See: https://www.gatsbyjs.com/docs/reference/built-in-components/gatsby-head/
 */
export const Head = () => <Seo title="Home" />

export default IndexPage

개츠비 서버를 실행합니다.

gatsby develop