Typescript를 사용하여 Astro에 Tailwind CSS 설치

12711 단어 typescripttailwindcssastrowebdev
이 섹션에서는 Tailwind CSS 3과 함께 Astro + Typescript를 설치 및 설정합니다. 이 섹션에서는 create-tw을 사용하여 CLI가 tailwindcss-ready 프로젝트를 스캐폴딩하는 데 도움이 됩니다. Astro는 빠르고 콘텐츠 중심의 웹사이트를 구축하기 위한 올인원 웹 프레임워크입니다.
view

특징 Astro
1.Component Islands: 더 빠른 웹사이트 구축을 위한 새로운 웹 아키텍처입니다.

2.서버 우선 API 설계: 사용자 장치에서 값비싼 수화 장치를 이동합니다.
  • 기본적으로 JS 없음: 속도를 늦추는 JavaScript 런타임 오버헤드가 없습니다.

    • 4. Edge-ready: Deno 또는 Cloudflare와 같은 글로벌 에지 런타임을 포함하여 어디에나 배포할 수 있습니다.

    5. 사용자 지정 가능: Tailwind, MDX 및 100개 이상의 기타 통합 중에서 선택할 수 있습니다.

    6.UI 불가지론: React, Preact, Svelte, Vue, Solid, Lit 등을 지원합니다.

    Astro로 Tailwind CSS 프로젝트 만들기



    npx를 사용하여 astro로 tailwind-app 만들기:

    npx create-tw@latest
# OR
npx create-tw@latest <project-name> --template <id>


    Yarn을 사용하여 astro로 tailwind-app 만들기:

    yarn create tw
# OR
yearn create tw <project-name> --template <id>


    천체 프로젝트를 선택합니다.


    astro로 타이프스크립트를 선택합니다.

    ? Project name astro-tailwind
? App type Astro (create-astro)
tid astro
? What language will your project be written in? (Use arrow keys)
❯ TypeScript 
 JavaScript


    코드 스타일을 선택합니다.

    ? Which dependencies would you like to include? (Press <space> to select, <a> to toggle all, <i> to invert selection, and <enter> to proceed)
❯◯ prettier
 ◯ clsx


    tailwind 플러그인을 선택합니다.

    ? Which plugins would you like to include? (Press <space> to select, <a> to toggle all, <i> to invert selection, and <enter> to proceed)
❯◯ @tailwindcss/typography
 ◯ @tailwindcss/forms
 ◯ @tailwindcss/aspect-ratio


    npm 종속성을 선택하고 git 초기화합니다.

    ✔ Would you like to install npm dependencies? (recommended) … yes
✔ Packages installed!
✔ Would you like to initialize a new git repository? (optional) … no


    astro에서 typescript 설정 방법을 선택합니다.

    ? How would you like to setup TypeScript? › - Use arrow-keys. Return to submit.
  Relaxed
❯  Strict (recommended) - Enable `strict` typechecking rules
  Strictest
  I prefer not to use TypeScript


    프로젝트로 이동하여 서버를 실행합니다.

    cd astro-tailwind
npm run dev


    src/페이지/index.astro

    ---
// Component Imports
import Button from '../components/Button.astro';

// Full Astro Component Syntax:
// https://docs.astro.build/core-concepts/astro-components/
---

<html lang="en">
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width" />
        <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
        <meta name="generator" content={Astro.generator} />
        <title>Astro + TailwindCSS</title>
    </head>

    <body>
        <div class="grid place-items-center h-screen content-center">
            <Button>Tailwind Button in Astro!</Button>
            <a href="/markdown-page" class="p-4 underline">Markdown is also supported...</a>
        </div>
    </body>
</html>


    일반 차별적 합집합 축소
    브라우저 확장 - DevTools 확장

    좋은 웹페이지 즐겨찾기

    개발자 우수 사이트 수집

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