[TailwindCSS] tailwindcss 초기설정 하는법

[yarn] 얀 기준으로 설명하겠다.

 

우선 기존에 설치되어있는지 확인해보자 

 

CMD

tailwindcss --version
//설치된 tailwindcss 버전 확인

yarn add -D taildwindcss
//yarn 라이브러리를 활용하여 개발자모드로 tailwindcss를 다운로드하자

npx tailwindcss init
// tailwindcss 초기설정?을 해주자

이때 다운로드가 안되는 경우도 있다.
다운로드가 필요한 버전으로 다운받아주자

 

 

tailwind.config.js

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ['./src/**/*.{js,jsx,ts,tsx}'], //<-- 사용할 컨텐츠들을 기입헤주자
  theme: {
    extend: {},
  },
  plugins: [],
};

 

index.css

// tailwind 관련하여 3줄 기입하자
@tailwind base; 
@tailwind components;
@tailwind utilities;

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
    sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

code {
  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
    monospace;
}