Установка Tailwind CSS в Astro с помощью Typescript

В этом разделе мы установим & настроим Astro + Typescript с Tailwind CSS 3. Для этого раздела мы будем использовать create-tw, который поможет CLI для создания проектов с поддержкой tailwindcss. Astro — это универсальный веб-фреймворк для создания быстрых, ориентированных на контент веб-сайтов.
посмотреть

Особенности Astro
1.Компонентные острова: Новая веб-архитектура для создания более быстрых веб-сайтов.

2.Дизайн API, ориентированный на сервер: Перенесите дорогостоящую гидратацию с устройств ваших пользователей.

  1. Нулевой JS по умолчанию: Никаких накладных расходов на выполнение JavaScript, замедляющих работу сайта.

4.Edge-ready: Развертывание в любом месте, даже на глобальных пограничных площадках, таких как Deno или Cloudflare.

5.Настраиваемость: Tailwind, MDX и 100+ других интеграций на выбор.

6.UI-агностичность: поддерживает React, Preact, Svelte, Vue, Solid, Lit и другие.

Создание проекта Tailwind CSS с помощью Astro

Создайте tailwind-приложение с помощью astro, используя npx:

npx create-tw@latest
# OR
npx create-tw@latest <project-name> --template <id>
Вход в полноэкранный режим Выход из полноэкранного режима

Создание tailwind-приложения с astro с помощью yarn:

yarn create tw
# OR
yearn create tw <project-name> --template <id>
Войти в полноэкранный режим Выход из полноэкранного режима

Выберите проект astro.

Выберите typescript с 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 dependencies, git initialize.

✔ Would you like to install npm dependencies? (recommended) … yes
✔ Packages installed!
✔ Would you like to initialize a new git repository? (optional) … no
Войти в полноэкранный режим Выход из полноэкранного режима

Выберите метод настройки typescript в astro.

? 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/pages/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>
Войдите в полноэкранный режим Выйти из полноэкранного режима

Оцените статью
devanswers.ru
Добавить комментарий