리믹스 - TailwindCSS 3.0으로 스타일 지정 🚨

리믹스 앱 👋

프로젝트를 설정하고 데모 사이트를 제공하는 기본 create-remix@latest 명령을 사용하겠습니다.

리믹스를 사용한 TailwindCSS 설정

터미널을 열고 npm 또는 yarn을 통해 동시에 tailwindcss, 해당 피어 종속성을 설치합니다.

npm install -D tailwindcss postcss autoprefixer concurrently
or if you prefer yarn
yarn add -D tailwindcss postcss autoprefixer concurrently

그런 다음 init 명령을 실행하여 tailwind.config.js 및 postcss.config.js를 모두 생성합니다.

npx tailwindcss init -p

tailwind.config.js 파일을 업데이트하고 tailwind.config.js 파일의 모든 템플릿 파일에 대한 경로를 추가합니다.

module.exports = {
  content: [
    "./app/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

이제 package.json 스크립트를 업데이트해야 합니다.

{
  "scripts": {
    "build": "npm run build:css && remix build",
    "build:css": "tailwindcss -m -i ./styles/app.css -o app/styles/app.css",
    "dev": "concurrently \"npm run dev:css\" \"remix dev\"",
    "dev:css": "tailwindcss -w -i ./styles/app.css -o app/styles/app.css",
  }
}

순풍 스타일

We need to Add the Tailwind directives to your CSS.
Create a ./styles/app.css file and add the @tailwind directives for each of Tailwind’s layers.

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

이제 ./app/root.jsx 파일의 링크를 사용하여 생성된 CSS 파일의 참조를 추가해야 합니다.

import styles from "./styles/app.css"

export function links() {
  return [{ rel: "stylesheet", href: styles }]
}

TailwindCSS는 Remix 앱에서 모두 설정됩니다.
이제 npm run dev를 실행하면/app/폴더의 루트에 tailwind.css 파일이 생성됩니다.

npm run dev

프로젝트에서 Tailwind를 사용하세요 🥳
Tailwind의 유틸리티 클래스를 사용하여 콘텐츠 스타일을 지정하세요.

export default function home() {
  return (
    <h1 className="text-3xl font-bold ">
      Remix + Tailwindcss 
    </h1>
  )
}

잘했어요! 👏
원본 게시물 읽기Click

읽어 주셔서 감사합니다! 안녕하세요!