Введение

Tailwind CSS — это популярная платформа CSS, ориентированная на утилиты, которая предоставляет низкоуровневые служебные классы для применения стилей непосредственно в разметке, что приводит к ускорению циклов разработки.

Prettier, с другой стороны, — это широко используемый форматировщик кода, который обеспечивает единообразие форматирования вашего кода путем его анализа и перепечатки по собственным правилам. Это помогает поддерживать единый стиль кода во всем проекте, делая базу кода более чистой и легкой для чтения.

Одной из распространенных проблем при использовании Tailwind CSS является управление порядком служебных классов, особенно по мере роста сложности стилей и HTML. Сортировка этих классов вручную может быть утомительной и подверженной ошибкам. Именно здесь на помощь приходит автоматическая сортировка классов. Используя такие инструменты, как Prettier, а также такие плагины, как prettier-plugin-tailwindcss, мы можем автоматизировать сортировку CSS-классов Tailwind, обеспечивая согласованный порядок и улучшая читаемость и удобство обслуживания классов.

Цель этой статьи — помочь вам настроить автоматическую сортировку классов Tailwind CSS с помощью Prettier как в новых, так и в существующих проектах. Независимо от того, начинаете ли вы новый проект или интегрируетесь в уже существующий, это подробное руководство предоставит вам пошаговые инструкции.

Оглавление

• Настройка Tailwind CSS и Prettier в новом проекте
  • Инициализация проекта и установка CSS Tailwind
  • Установить и настроить Prettier
• Настройка prettier-plugin-tailwindcss в существующем CSS-проекте Tailwind
• Заключение

Настройка Tailwind CSS и Prettier в новом проекте

Прежде чем мы начнем, убедитесь, что у вас установлено следующее:

• Node.js
• Менеджер пакетов (в этом проекте мы будем использовать Bun, но вы можете использовать npm, Yarn или pnpm, если хотите)
• Редактор кода (например, VS Code)

Инициализация проекта и установка Tailwind CSS

Начните с создания нового проекта. Конкретные шаги могут различаться в зависимости от предпочитаемой вами платформы или настройки. Подробные инструкции см. в руководстве по установке платформы Tailwind CSS. Если вы уже выполнили шаги по установке Tailwind CSS, вы можете перейти к настройке prettier-plugin-tailwindcss в разделе «Существующий CSS-проект Tailwind». Вот как это сделать с помощью Vite:

bun create vite my-app --template react-ts
cd my-app
bun install

Теперь давайте установим и настроим Tailwind CSS

bun install -D tailwindcss postcss autoprefixer
bunx tailwindcss init -p

Вы должны увидеть файл конфигурации CSS Tailwind: Tailwind.config.js, скопируйте в него следующее содержимое.

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

Добавьте следующие директивы Tailwind в начало вашего CSS-файла (например, src/index.css):

@tailwind base;
@tailwind components;
@tailwind utilities;

Установите и настройте Prettier

bun install -D prettier prettier-plugin-tailwindcss

Создайте более красивый файл конфигурации в корне вашего проекта и добавьте плагин prettier-plugin-tailwindcss в файл конфигурации, мы будем использовать .prettierrc, вы можете проверить другие приемлемые типы файлов более красивой конфигурации здесь здесь

{
  "plugins": ["prettier-plugin-tailwindcss"]
}

Теперь давайте проверим настройку, изменим файл src/App.tsx и сохраним его.

import { useState } from "react";
import "./App.css";

const App = () => {
  const [count, setCount] = useState(0);

  return (
    
      

         setCount((count) => count   1)}
        >
          Count is {count}
        
      
    >
  );
};

export default App;

Результат:

import { useState } from "react";
import "./App.css";

const App = () => {
  const [count, setCount] = useState(0);

  return (
    
      

         setCount((count) => count   1)}
        >
          Count is {count}
        
      
    >
  );
};

export default App;

Настройка prettier-plugin-tailwindcss в существующем CSS-проекте Tailwind

Если в вашем проекте уже настроен Prettier, интегрировать плагин prettier-plugin-tailwindcss очень просто. Вам нужно будет только установить плагин и настроить его. Если Prettier еще не установлен, вам необходимо установить его вместе с плагином.

Для проектов с уже существующей более красивой настройкой запустите:

bun add -D prettier-plugin-tailwindcss

Для проектов, в которых отсутствуют настройки Prettier, запустите:

bun add -D prettier prettier-plugin-tailwindcss

Добавьте плагин в существующую конфигурацию Prettier. Если существующей конфигурации Prettier нет, создайте файл .prettierrc в корне вашего проекта. Затем добавьте следующее:

{
  "plugins": ["prettier-plugin-tailwindcss"]
}

Убедитесь, что Prettier работает правильно, внося изменения в файл с классами CSS Tailwind. Сохраните файл и проверьте, сортируются ли CSS-классы Tailwind автоматически.

Заключение

Интеграция prettier-plugin-tailwindcss как в новые, так и в существующие CSS-проекты Tailwind улучшает рабочий процесс разработки, обеспечивая последовательную и организованную сортировку классов. Для новых проектов вы можете настроить Prettier и плагин одновременно, чтобы упростить первоначальную настройку. Для существующих проектов просто добавьте плагин в существующую настройку Prettier или установите Prettier и плагин, если Prettier еще не настроен.

Дополнительные параметры конфигурации, такие как сортировка классов по нестандартным атрибутам, см. в документации prettier-plugin-tailwindcss.