Tailwind CSS를 추가하는 방법

Tailwind CSS를 추가하는 간단한 4단계

1. 구성 파일 생성

touch tailwind.config.js
touch postcss.config.js

const colors = require('tailwindcss/colors');

module.exports = {
  theme: {
    colors: {
      gray: colors.coolGray,
      blue: colors.lightBlue,
      red: colors.rose,
      pink: colors.fuchsia,
    },
    fontFamily: {
      sans: ['Graphik', 'sans-serif'],
      serif: ['Merriweather', 'serif'],
    },
    extend: {
      spacing: {
        '128': '32rem',
        '144': '36rem',
      },
      borderRadius: {
        '4xl': '2rem',
      },
    },
  },
  variants: {
    extend: {
      borderColor: ['focus-visible'],
      opacity: ['disabled'],
    },
  },
};

module.exports = () => ({
  plugins: [require('tailwindcss')],
});

2. NPM 종속성 추가

npm install --save gatsby-plugin-postcss tailwindcss

3. Gatsby 설정에 Gatsby 플러그인 추가

module.exports = {
  "plugins": [
    // All other plugins
    `gatsby-plugin-postcss`
  ]
})

4. TailwindCSS 가져오기

import 'tailwindcss/base.css';
import 'tailwindcss/components.css';
import 'tailwindcss/utilities.css';