UnoCSS로 스타일 지정
npm install -D unocss @unocss/reset
unocss는 기본 패키지이며 @unocss/reset는 Tailwind용 기본 스타일 세트인 Tailwind CSS "Preflight"를 포함하여 CSS 재설정 모음을 제공합니다.UnoCSS readme에 따라
vite.config.ts 파일import Unocss from "unocss/vite";에 추가한 다음 UnoCSS() 배열에 plugins 추가합니다.import { defineConfig } from "vite";
import rakkas from "rakkasjs/vite-plugin";
import tsconfigPaths from "vite-tsconfig-paths";
import Unocss from "unocss/vite";
import dotenv from "dotenv";
dotenv.config();
export default defineConfig({
envDir: ".",
plugins: [
tsconfigPaths(),
rakkas({
adapter: "cloudflare-workers",
}),
Unocss(),
],
});
또한
src/routes/layout.tsx 맨 위에 다음 가져오기를 추가합니다.import "@unocss/reset/tailwind.css";
import "uno.css";
ESLint는 해결할 수 없다고 불평합니다
uno.css. .eslintrc.cjs 파일에 다음을 추가하여 종료할 수 있습니다. // ...
rules: {
"import/no-unresolved": ["error", { ignore: ["uno.css"] }],
},
};
개발 서버를 돌리면 앱이 이제 완전히 스타일이 지정되지 않은 것을 볼 수 있습니다. UnoCSS를 사용하면 클래스 이름으로 앱의 스타일을 지정할 수 있습니다. 기본 사전 설정은
ml-3(Tailwind), ms-2(Bootstrap), ma4(Tachyons) 및 mt-10px(Windi CSS)가 모두 유효합니다..ma4 { margin: 1rem; }
.ml-3 { margin-left: 0.75rem; }
.ms-2 { margin-inline-start: 0.5rem; }
.mt-10px { margin-top: 10px; }
먼저
<hr /> 요소를 제거하고 헤더에 색상, 패딩 및 아래쪽 테두리를 추가합니다.<header className="px-5 py-5 b-b bg-amber">
px는 가로 패딩의 줄임말이고 py는 세로 패딩의 줄임말입니다. b-b는 아래쪽 테두리의 줄임말입니다. bg-amber는 배경색을 황색으로 설정하기 위한 것입니다. 자세한 내용은 UnoCSS website에서 확인할 수 있습니다.나는 이 기사를 읽는 모든 사람들이 나보다 멋진 웹사이트를 디자인하는 데 더 능숙하다고 확신합니다. 30분 동안 땜질을 한 후에 내가 생각해낼 수 있는 것은 다음과 같습니다.
좋지 않을 수도 있지만 결과에 만족합니다. 내가 적합하다고 본대로 마크 업을 변경했습니다. 또한
Head ( index.page.tsx )에서 페이지 제목을 설정하기 위해 <Head title="uBlog" /> 구성 요소를 추가했습니다. 결과here를 볼 수 있습니다.결론
이 튜토리얼 시리즈가 마음에 드셨기를 바라며 Rakkas가 제 생각만큼 쉽게 작업할 수 있기를 바랍니다. 사용자 프로필 페이지, 게시물 삭제 기능, 페이지 매기기 등을 추가하여 이 작은 앱을 확장할 수 있습니다. Rakkas Discord 채팅 서버에서 편하게 인사하세요!
You can find the progress up to this point on GitHub.
Reference
이 문제에 관하여(UnoCSS로 스타일 지정), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/cyco130/styling-with-unocss-284h텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
