빌드 필요 없음 Tailwind 대안 - Twins 🎏

6706 단어 webdevnodetailwindcssjavascript

쌍둥이란?



Twind는 현존하는 가장 작고 빠르며 기능이 완벽한 tailwind-in-js 솔루션입니다. Tailwind(v3)와 달리 아무 것도 빌드하지 않으며 원하는 경우 클라이언트에 twind js 파일을 번들로 묶을 수 있습니다! 즉석에서 바로 작동합니다 😮

Tailwind v3에 있는 빌드 단계는 잊어버리세요!



PostCSS, 구성, 제거 또는 자동 접두사 없이 Tailwind의 모든 이점을 누리세요. 거의 0.2ms 안에 전체 웹사이트에 대한 CSS를 생성할 수 있을 정도로 빠릅니다!

어떤 프레임워크에서도 벤더 종속이 없습니다!



대부분의 경우 미리 구성된 Nextjs 앱 또는 모든 것이 자동으로 설정되는 유사한 프레임워크와 함께 Tailwind를 사용합니다. 그러나 Twind는 Tailwind에서와 같이 구성이 거의 필요하지 않기 때문에 많은 사람들이 아무것도 구축하고 싶지 않은 사이트를 만들고 싶을 때 선호하는 선택입니다.

😎 작지만 저렴한 고정비 하나



Twind v1용 컴파일러는 비용이 4.5kb에 불과하며 이전 버전의 Twind(v0)가 13kb보다 2배 이상 작습니다! 이 멋진 프로젝트를 만들어준 Sastan에게 감사드립니다 🥰

MIT 라이센스



가장 제한적이지 않은 라이선스 중 하나인 MIT 라이선스를 사용한다는 사실을 알려드립니다!


귀하의 정보:



Twind v1 웹사이트는 https://twind.style에 있습니다.
Twind v0 웹사이트는 https://twind.dev에 있습니다.

Twind v1을 사용하는 방법?



Sastan은 일상적인 일과 가족으로 꽤 바쁘기 때문에 현재 문서가 없습니다. 그러나 그것이 우리가 그것을 사용하는 방법을 설명하는 이 블로그를 작성하는 것을 막지는 않습니다!

방법 1: 지원되는 Twind v1 프레임워크 사용



다음 두 프레임워크 중 하나를 사용하는 것을 고려하십시오.
  • Ree.js: https://github.com/rovelstars/reejs (Node.js 및 Deno 사용자용)
  • 신선한: https://fresh.deno.dev (Deno 사용자용)
    이 두 프레임워크는 모두 Twind와 함께 번들로 제공되며 각 프레임워크를 옵트아웃할 수 있습니다!

    • 방법 2: 처음부터 시작:



    참고로 Rendering 방법에 따라 다른 패키지를 사용해야 합니다. 클라이언트 측 렌더링의 경우 @twind/cdn를 사용합니다. 서버 사이드 렌더링의 경우 twind를 사용합니다.
    그리고 @twind/preset-tailwind Twind에 순풍 클래스를 생성하는 방법에 대한 모든 규칙을 알려주는 작은 폴리필 때문입니다. 그리고 스포일러 주의! 겁나 빨라!

    Ree.js에서는 두 가지 모드를 모두 사용하며 가장 쉬운 방법으로 웹사이트에 Twind v1을 추가하는 방법에 대한 경험을 공유할 것입니다!

    서버 사이드 렌더링



    언급된 패키지를 설치합니다.

    $ npm i twind@next @twind/preset-tailwind@next


    서버 애플리케이션으로 가져오기:

    import twind from "twind";
import presetTW from "@twind/preset-tailwind";
twind.setup({
 /* config */
 presets: [presetTW]
});

//Here app is a server, we are following h3 server specification and not express, but most of the time its just same!

app.get("/", (req, res)=>{
let body = `<div class="min-h-screen bg-indigo-600"><p class="font-bold text-white text-7l">Hello From Twind!</p></div>`;
let css = twind.extract(body).css;
let html = `<html>
<head>
<style>
${css}
</style>
<body>
${body}
</body>
</html>`
return html;
// I remember you probably need to use res.send(html) on expressjs server ;)
});


    이것은 작은 예이며 일부 메타 태그 및 기타 항목을 html 문자열에 추가해야 할 수도 있습니다.

    하지만 완성한 것 같습니다!


    클라이언트 측 렌더링




    <html hidden>
<head>
<script type="module">
let twind = await import("https://esm.run/@twind/cdn@next");
twind.setup();
document.querySelector("html").removeAttribute("hidden");
</script>
<body>
<div class="min-h-screen bg-indigo-600"><p class="font-bold text-white text-7l">Hello From Twind!</p></div>
</body>
</html>

    hidden 속성은 Twind가 로드되기 전에 페이지를 표시하지 않으므로 "FlashBang!"하얀 화면 😅


    행복한 코딩 & 좋은 하루 되세요!
    Twind v1을 직접 설정하는 데 도움을 준 Sastan에게 감사드립니다!
    이 게시물이 마음에 들면 좋아요, 유니콘을 고려하고 친구들과 공유하십시오!
    oat++ 서버. 설치. CmakeLists.txt
    Pokedex: Actualizar Vue de la 버전 2 a la 3

    좋은 웹페이지 즐겨찾기

    개발자 우수 사이트 수집

    개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
    best100-homepage