Meteor 프로젝트에 Tailwind CSS 설치하기

Meteor 프로젝트에서 Tailwind CSS 설정하기

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

터미널

npx meteor create my-projectcd my-project

npm을 통해 @tailwindcss/postcss와 그에 필요한 의존성을 설치하세요.

터미널

npm install tailwindcss @tailwindcss/postcss postcss postcss-load-config

프로젝트 루트에 postcss.config.mjs 파일을 생성하고, PostCSS 설정에 @tailwindcss/postcss 플러그인을 추가하세요.

postcss.config.mjs

export default {  plugins: {    "@tailwindcss/postcss": {},  },};

./client/main.css 파일에 Tailwind CSS를 위한 @import를 추가하세요.

main.css

@import "tailwindcss";

npm run start로 빌드 프로세스를 실행하세요.

터미널

npm run start

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

App.jsx

export const App = () => (  <h1 className="text-3xl font-bold underline">    Hello world!  </h1>)