Tailwind 플러그인 + Vite + Typescript + Tailwind CSS 3 설치
16359 단어 typescripttailwindcssjavascriptvite
view
Tailwind CSS 프로젝트 만들기
npx로 tailwind v3 프로젝트 생성:
npx create-tw@latest
# OR
npx create-tw@latest <project-name> --template <id>
원사를 사용하여 tailwind v3 프로젝트를 만듭니다.
yarn create tw
# OR
yearn create tw <project-name> --template <id>
바닐라 프로젝트를 선택합니다.
타이프스크립트를 선택합니다.
_ ._ _ _. _|_ _ _|_
(_ | (/_ (_| |_ (/_ |_ \/\/
Welcome to create-tw!
The easiest way to create a Tailwind project
? Project name tailwind-app
? App type Vanilla (create-vite)
tid vanilla
? What language will your project be written in? (Use arrow keys)
❯ TypeScript
JavaScript
코드 스타일을 선택합니다.
? Project name tailwind-app
? App type Vanilla (create-vite)
tid vanilla
? What language will your project be written in? ts
templateIdKey vanilla-ts
? 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 css 양식 플러그인 및 타이포그래피 플러그인을 선택합니다.
? Project name tailwind-app
? App type Vanilla (create-vite)
tid vanilla
? What language will your project be written in? ts
templateIdKey vanilla-ts
? Which dependencies would you like to include?
? 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
프로젝트로 이동하여 vite를 실행합니다.
cd tailwind-app
npm run dev
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Create Tailwind</title>
<link rel="stylesheet" href="/src/style.css" />
</head>
<body
class="h-screen bg-gradient-to-b from-gray-900 to-slate-800 flex flex-col text-white"
>
<header class="py-16">
<h1 class="text-4xl font-bold text-center mb-6">Tailwind Plugins + Vite + Typescript + Tailwind CSS 3</h1>
<div class="flex flex-row justify-center items-center gap-4">
<a
class="github-button"
href="https://github.com/andrejjurkin/create-tailwind-app"
data-color-scheme="no-preference: dark; light: dark; dark: dark;"
data-icon="octicon-star"
data-size="large"
data-show-count="true"
aria-label="Star andrejjurkin/create-tailwind-app on GitHub"
>Star</a
>
<a
class="github-button"
href="https://github.com/andrejjurkin/create-tailwind-app/discussions"
data-color-scheme="no-preference: dark; light: dark; dark: dark;"
data-icon="octicon-comment-discussion"
data-size="large"
aria-label="Discuss andrejjurkin/create-tailwind-app on GitHub"
>Discuss</a
>
</div>
</header>
<main class="flex-1">
<section class="text-center">
<div class="w-full grid place-items-center p-12">
<a href="https://vitejs.dev/">
<img src="/vite.svg" alt="Vite" class="h-24" />
</a>
</div>
<h2 class="text-3xl font-bold text-center">Tailwind Plugins + Vite + Typescript + Tailwind CSS 3</h2>
<p class="mb-6">The Next Generation Frontend Tooling</p>
<ul
class="flex flex-row items-center w-full gap-8 justify-center text-blue-300 font-medium"
>
<li>
<a href="https://vitejs.dev/">Learn More</a>
</li>
<li>
<a href="https://vitejs.dev/guide/why.html">Why Vite?</a>
</li>
</ul>
</section>
</main>
<footer class="px-8 py-12 border-t border-gray-800">
<div class="px-8 font-medium text-center">
<a href="https://github.com/andrejjurkin/create-tailwind-app">
Create Tailwind
</a>
</div>
</footer>
<script type="module" src="/src/main.ts"></script>
<!-- Place this tag in your head or just before your close body tag. -->
<script async defer src="https://buttons.github.io/buttons.js"></script>
</body>
</html>
Reference
이 문제에 관하여(Tailwind 플러그인 + Vite + Typescript + Tailwind CSS 3 설치), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/larainfo/install-tailwind-plugins-vite-typescript-tailwind-css-3-1igc텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
