CSS

[css] tailwind css 설치하는 법

1two13 2023. 1. 29. 18:08
728x90
반응형

 

tailwind css 설치하는 법

1. 터미널에 아래의 코드를 입력해 tailwind css 설치하기

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

 

2. 자동으로 생성된 tailwind.config.js 파일의 content에 해당 코드를 추가하기

content: [
  './src/**/*.{js,jsx,ts,tsx}',
],
728x90

3. 그리고 src/App.css 파일의 제일 상단에 3줄의 코드를 작성하기

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

 

4. 잘 작동하는지 확인하기 위해 src/App.tsx 파일로 와서 실험해 보기

import "./App.css";

function App() {
  return (
    <div className="App">
      <h1 className="text-3xl font-bold underline text-red-600">
        Simple React Typescript Tailwind Sample
      </h1>
    </div>
  );
}

export default App;
반응형

5. npm start를 해보니 아래 사진과 같이 잘 출력되는 것을 확인할 수 있다.

참고하면 좋은 자료

 

728x90
반응형