Prologue

Windi CSS의 존재를 알고, 보면 문서도 알기 쉬웠기 때문에 만져 보았습니다.

공식: h tps : // 울릉 cs. rg/

환경

macOS: v10.15.6

node.js: v12.18.2

terminal: iTerm

편집자: VS Code

패키지 관리자: yarn

Windi CSS란?

Tailwind CSS 용 next generation compiler.

Tailwind v2.0 이상을 지원하며 더 빠른 로드 시간을 지원합니다.

Tailwind를 사용하지 않아도 utility-first CSS 라이브러리로 사용할 수 있습니다.

특징

컴파일이 빠릅니다.
사용하는 CSS 만로드하고 제거는 필요하지 않습니다.

TailwindCSS를 지원합니다.

변수는 자동 추론됩니다.
Class의 시멘틱스에 근거해 자동적으로 생성된다.
h tps : // 울릉 cs. rg/구이데/후아트레 s. HTML

크로스 브라우저 호환.

Nuxt에 넣어보세요

Nuxt 에 vue-windicss-preprocess 를 인스톨 하는 것 같습니다만, CLI 에서도 선택할 수 있었으므로 이번은 그쪽에서 작성해 보았습니다.

참고: h tps : // 울릉 cs. 오 rg/구이데/ゔ에. html #누 xt

프로젝트 이름은 nuxt-windi-css로 작성되었습니다.

% yarn create nuxt-app nuxt-windi-css 

create-nuxt-app v3.6.0
✨  Generating Nuxt.js project in nuxt-windi-css
? Project name: nuxt-windi-css
? Programming language: TypeScript
? Package manager: Yarn
? UI framework: Windi CSS
? Nuxt.js modules: Axios - Promise based HTTP client
? Linting tools: ESLint, Prettier
? Testing framework: None
? Rendering mode: Single Page App
? Deployment target: Server (Node.js hosting)
? Development tools: (Press <space> to select, <a> to toggle all, <i> to invert selection)
? Continuous integration: GitHub Actions (GitHub only)
? What is your GitHub username? mi**
? Version control system: Git

nuxt-windicss-module: README과 비교하여 package.json, nuxt.config.js를 확인해보십시오.

package.json

"devDependencies": {
  // 略
  "nuxt-windicss": "^0.4.4"
}

nuxt.config.js

buildModules: [
  // https://go.nuxtjs.dev/typescript
  '@nuxt/typescript-build',
  'nuxt-windicss',
],

README 거리에 들어 있기 때문에 특히 추기하지 않았습니다.

움직여 보자

그렇게 큰 코드가 아니기 때문에, 속도의 실감은 그다지 얻을 수 없어...
변수 등을 확인해 보았습니다.

@apply

기존의 utility class 를 style 에 인라인화하는 directives.

참고: h tps : // 울릉 cs. rg/구이데/ぢれcちゔぇs. HTML
tailwind: h tps : // 싶다 ㄱ ぃん dcs ㎃. 코 m / 드 cs / 훙 c 치온 s - an d ぢ 레 c 치 ぇ s # 어 ply

아래와 같은 공통화할 수 있을 것 같은 버튼 style 를 @apply 를 사용해 재기록해 보겠습니다.

before

.button--green {
  display: inline-block;
  border-radius: 4px;
  border: 1px solid #3b8070;
  color: #3b8070;
  text-decoration: none;
  padding: 10px 30px;
}

after

.btn-default {
  display: inline-block;
  border-radius: 4px;
  text-decoration: none;
  padding: 10px 30px;
}

.button--green {
  @apply btn-default;
  border: 1px solid #3b8070;
  color: #3b8070;
}

준비된 유틸리티를 사용해 봅니다.

참고: h tps : // 울릉 cs. 오 rg / 우치 치에 s /

.btn-default {
  /* display: inline-block; */ 
  @apply inline-block;
  border-radius: 4px;
  text-decoration: none;
  padding: 10px 30px;
}

.button--green {
  @apply btn-default bg-green-600;
  border: 1px solid #3b8070;
  color: #3b8070;
}

@dark

참고: h tps : // 울릉 cs. 오 rg / 우치 치에 s / ぁ 리안 ts. html

Following System 이므로 @media (prefers-color-scheme: dark) {...} 로 설정한 항목을 사용할 수 있게 된다...?
일단은 prefers-color-scheme: dark 로 그대로 써 보았습니다만, 사용할 수 있게 되면 깔끔해 보인다.

@media (prefers-color-scheme: dark) {
  .button--green {
    @apply bg-blue-50;
  }
}

.button--green {
  @apply btn-default bg-green-300;
  border: 1px solid #3b8070;
}

dark mode

VSCode Vetur 설정 변경

semi-colon expectedcss(css-semicolonexpected)와 같은 오류가 발생합니다.

settings.json을 열고 "vetur.validation.style": false를 추가하십시오.

Epilogue

이번은 조금 만지는 것만으로 끝으로 했습니다만, CLI 로부터 만드는 것으로 해도 나중에 install 하도록 해도 간단하게 도입할 수 있어 꽤 허들은 낮다, 라고 느꼈습니다.
utilities나 variants도 문서가 있으므로 길을 잃지 않는 것 같습니다.

Vite나 Svelte에서도 사용할 수 있는 것 같아서, 다음번은 그 근처에서 어프로치해 보려고 했습니다.