Домашняя страница Tailwind CSS
  1. Начало работы
  2. Установите Tailwind CSS c SvelteKit

  1. Создайте свой проект

    Начните с создания нового проекта SvelteKit, если он еще не настроен. Наиболее распространенный подход описан в начале работы со SvelteKit .

    Terminal
    npx sv create my-projectcd my-project

  2. Установите Tailwind CSS

    Установите tailwindcss и его одноранговые зависимости, а затем создайте файлы tailwind.config.js и postcss.config.js.

    Terminal
    npm install -D tailwindcss@3 postcss autoprefixernpx tailwindcss init -p

  3. Включить использование PostCSS в блоках <style>

    В файле svelte.config.js импортируйте vitePreprocess, чтобы разрешить обработку блоков <style> как PostCSS.

    svelte.config.js
    import adapter from '@sveltejs/adapter-auto';
import { vitePreprocess } from '@sveltejs/vite-plugin-svelte';
/** @type {import('@sveltejs/kit').Config} */
const config = {
  kit: {
    adapter: adapter()
  },
  preprocess: vitePreprocess()
};
export default config;

  4. Настройте пути к шаблону

    Добавьте пути ко всем файлам вашего шаблона в файл tailwind.config.js file.

    tailwind.config.js
    /** @type {import('tailwindcss').Config} */
export default {
  content: ['./src/**/*.{html,js,svelte,ts}'],
  theme: {
    extend: {}
  },
  plugins: []
};

  5. Добавьте директивы Tailwind в свой CSS

    Создайте файл ./src/app.css и добавьте директивы @tailwind для каждого слоя Tailwind.

    app.css
    @tailwind base;
@tailwind components;
@tailwind utilities;

  6. Импортируйте файл CSS

    Создайте файл ./src/routes/+layout.svelte и импортируйте только что созданный файл app.css.

    +layout.svelte
    <script>
  import "../app.css";
</script>

<slot />

  7. Начните процесс сборки

    Запустите процесс сборки с помощью npm run dev.

    Terminal
    npm run dev

  8. Начните использовать Tailwind в своем проекте

    Начните использовать классы-утилиты Tailwind для стилизации своего контента, установив lang="postcss" для всех блоков <style>, которые должны обрабатываться Tailwind.

    +page.svelte
    <h1 class="text-3xl font-bold underline">
  Hello world!
</h1>

<style lang="postcss">
  :global(html) {
    background-color: theme(colors.gray.100);
  }
</style>