Tailwind와 PostCSS를 사용한 스타일링 리믹스

목차

TL;DR: 소스 및 데모

Here's a live demo
Link to the source code
Link to step by step commits

소개

종속성

설치

npm install -D autoprefixer postcss postcss-cli postcss-import tailwindcss cssnano

yarn add -D autoprefixer postcss postcss-cli postcss-import tailwindcss cssnano

package.json에 스크립트 추가

CSS 생성을 위한 스크립트 추가

// package.json
"scripts": {
  // ...
  "css:watch": "npm run css:build -- --watch",
  "css:build": "postcss styles/**/*.css --dir app/styles",
  "css:prod": "npm run css:build -- --env production",
  // ...
},

Replace npm run with yarn if you prefer to use yarn

app/styles/*.css

빌드 파일 정리를 위한 스크립트 추가

// package.json
"scripts": {
  // ...
  "build": "npm run css:prod && remix build",
  "prebuild": "rimraf ./public/build \"./app/styles/**/*.css\""
  // ...
},

스크립트 실행

npm run css:watch

npm run dev

DISCLAIMER: Don't expect it will work immediately. We still need to configure a few things with Tailwind and PostCSS.

선택 사항: 단일 명령으로 여러 스크립트 실행

npm run build

// package.json
"scripts": {
  // ...
  "dev": "concurrently npm run css:watch && remix dev",
  // ...
}

Tailwind 및 앱 스타일 사전 설정

참조 순풍 스타일

/* styles/tailwind.css */
@tailwind base;
@tailwind components;
@tailwind utilities;
@tailwind screens;

앱 CSS 사전 설정

/* styles/app.css */
:root {
  --color-primary-light: hsl(210, 100%, 98%);
  --color-primary-100: hsl(210, 100%, 95%);
  --color-primary-200: hsl(210, 100%, 85%);
  --color-primary-300: hsl(210, 100%, 80%);
  --color-primary-400: hsl(210, 100%, 75%);
  --color-primary-500: hsl(210, 100%, 60%);
  --color-primary-600: hsl(210, 100%, 50%);
  --color-primary-700: hsl(210, 100%, 40%);
  --color-primary-800: hsl(210, 100%, 30%);
  --color-primary-900: hsl(210, 100%, 20%);
  --color-primary-dark: hsl(210, 100%, 2%);
}

input,
select,
textarea {
  @apply text-black;
}

@media (prefers-color-scheme: dark) {
  html {
    @apply bg-black text-white;
  }
}

PostCSS 및 Tailwind 구성

PostCSS 구성 파일

// postcss.config.js
module.exports = {
  plugins: [
    require("tailwindcss"),
    require("autoprefixer"),
    require("postcss-import"),
    process.env.NODE_ENV === "production" &&
      require("cssnano")({
        preset: "default",
      }),
  ],
};

Tailwind 구성 파일

// tailwind.config.js
module.exports = {
  mode: process.env.NODE_ENV ? "jit" : undefined,
  // To purge CSS in .ts .tsx files
  purge: ["./app/**/*.{ts,tsx}"], 
  darkMode: "media", // Use media queries for dark mode
  theme: {
    extend: {
      colors: {
        // color scheme is defined in /app.css
        // To enable text-primary-xxx, bg-primary-xxx, or border-primary-xxx
        primary: {
          light: "var(--color-primary-light)",
          100: "var(--color-primary-100)",
          200: "var(--color-primary-200)",
          300: "var(--color-primary-300)",
          400: "var(--color-primary-400)",
          500: "var(--color-primary-500)",
          600: "var(--color-primary-600)",
          700: "var(--color-primary-700)",
          800: "var(--color-primary-800)",
          900: "var(--color-primary-900)",
          dark: "var(--color-primary-dark)",
        },
      },
    },
  },
  variants: {}, // activate any variant you want here
  plugins: [], // add any plugin you need here
};

app/root.tsx의 링크를 사용하여 생성된 CSS 파일의 참조 추가 // 앱/root.js // ... "remix"에서 유형 { LinksFunction } 가져오기; "~/styles/tailwind.css"에서 tailwindStyles 가져오기; "~/styles/app.css"에서 appStyles 가져오기; let 링크 내보내기: LinksFunction = () => { 반품 [ { rel: "스타일시트", href: tailwindStyles }, { rel: "스타일시트", href: 앱스타일, }, ]; }; // ... 리믹스 코드에서 스타일 통합하기

평소와 같이 Tailwind를 사용합니다. className 소품 내부에 추가된 Tailwind의 클래스 이름을 추가합니다. //app/components/word-form/index.tsx import { Form, useTransition } from "remix"; "~/models/word"에서 { Word, WordType } 가져오기; "../basic/button"에서 { 버튼 } 가져오기; import { Input } from "../basic/input"; import { 선택 } from "../basic/select"; "../basic/textarea"에서 { TextArea } 가져오기; 내보내기 함수 WordForm({단어 }: {단어?:단어 }) { 전환 = useTransition(); 반품 ( <양식 방법 = "게시" 클래스 이름={` px-3 py-4 둥근 플렉스 flex-col gap-2 border-2 `} > <div>양식 상태: {transition.state}</div> <div> <label className="block text-xs" htmlFor="이름"> 단어 </레이블> <입력 아이디 = "이름" 이름="이름" 유형 = "텍스트" placeholder="단어" 필수의 defaultValue={단어?.이름 ?? ""} disabled={Boolean(단어?.이름)} /> </div> <div> <label className="block text-xs" htmlFor="유형"> 유형 </레이블> <선택 아이디 = "유형" 이름 = "유형" defaultValue={단어?.유형 ?? WordType.NOUN} > <option value={WordType.NOUN}>명사</option> <옵션 값={WordType.VERB}>동사</option> <option value={WordType.ADJECTIVE}>형용사</option> </선택> </div> {/*텍스트 영역*/} <버튼 유형="제출" 색상="기본"> 제출하다 </버튼> </양식> ); } // ... 위의 파일이 어디에서 왔는지 궁금하다면 그것은 내 마지막 . 구성 요소 스타일 지정

다음은 VSCode에서 Tailwind 및 PostCSS를 사용하여 더 나은 경험을 얻는 데 사용할 수 있는 몇 가지 플러그인입니다. VSCode 플러그인

결론