Cara Menyediakan Pengisihan Kelas Automatik CSS Tailwind dengan Prettier dalam Projek Baharu dan Sedia Ada

pengenalan

Tailwind CSS ialah rangka kerja CSS yang mengutamakan utiliti yang popular yang menyediakan kelas utiliti peringkat rendah untuk menggunakan gaya terus dalam penanda, yang membawa kepada kitaran pembangunan yang lebih pantas.

Prettier, sebaliknya, ialah pemformat kod yang digunakan secara meluas yang memastikan kod anda diformat secara konsisten dengan menghuraikannya dan mencetaknya semula dengan peraturannya sendiri. Ini membantu mengekalkan gaya kod seragam merentas keseluruhan projek, menjadikan pangkalan kod lebih bersih dan lebih mudah dibaca.

Satu cabaran biasa apabila menggunakan Tailwind CSS ialah mengurus susunan kelas utiliti, terutamanya apabila kerumitan gaya dan HTML anda semakin meningkat. Mengisih kelas ini secara manual boleh membosankan dan terdedah kepada ralat. Di sinilah pengisihan kelas automatik masuk. Dengan memanfaatkan alatan seperti Prettier bersama-sama dengan pemalam seperti prettier-plugin-tailwindcss, kami boleh mengautomasikan pengisihan kelas CSS Tailwind, memastikan susunan yang konsisten dan meningkatkan kebolehbacaan dan kebolehselenggaraan kelas.

Tujuan artikel ini adalah untuk membimbing anda melalui proses menyediakan pengisihan kelas automatik Tailwind CSS dengan Prettier dalam kedua-dua projek baharu dan sedia ada. Sama ada anda memulakan projek baharu atau menyepadukan ke projek yang sedang berjalan, panduan komprehensif ini akan memberikan anda arahan langkah demi langkah.

Jadual Kandungan

• Menyediakan CSS Tailwind dan Lebih Cantik dalam Projek Baharu
  • Memulakan Projek dan Memasang Tailwind CSS
  • Pasang dan Konfigurasikan Lebih Cantik
• Menyediakan prettier-plugin-tailwindcss dalam Projek CSS Tailwind Sedia Ada
• Kesimpulan

Menyediakan CSS Tailwind dan Lebih Cantik dalam Projek Baharu

Sebelum kami bermula, pastikan anda telah memasang yang berikut:

• Node.js
• Pengurus pakej (kami akan menggunakan bun untuk projek ini, tetapi anda boleh menggunakan npm, benang atau pnpm jika anda mahu)
• Penyunting kod (cth., Kod VS)

Memulakan Projek dan Memasang CSS Tailwind

Mulakan dengan mencipta projek baharu. Langkah khusus mungkin berbeza-beza bergantung pada rangka kerja atau persediaan pilihan anda. Rujuk Panduan Rangka Kerja Pemasangan CSS Tailwind untuk arahan terperinci. Jika anda telah melengkapkan langkah-langkah pemasangan Tailwind CSS, anda boleh meneruskan ke Menyediakan bahagian Prettier-plugin-tailwindcss dalam bahagian Projek CSS Tailwind Sedia Ada. Begini cara melakukannya menggunakan Vite:

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

Sekarang mari pasang & konfigurasi CSS Tailwind

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

Anda sepatutnya melihat fail konfigurasi CSS Tailwind: tailwind.config.js, salin kandungan berikut ke dalamnya.

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

Tambahkan arahan Tailwind berikut pada bahagian atas fail CSS anda (cth., src/index.css):

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

Pasang dan Konfigurasi Lebih Cantik

bun install -D prettier prettier-plugin-tailwindcss

Buat fail konfigurasi yang lebih cantik dalam akar projek anda dan tambahkan pemalam prettier-plugin-tailwindcss pada fail konfigurasi, kami akan menggunakan .prettierrc, anda boleh menyemak jenis fail konfigurasi cantik lain yang boleh diterima di sini

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

Sekarang mari kita uji persediaan, ubah suai fail src/App.tsx dan simpannya.

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

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

  return (
    <>
      <div className="card">
        <button
          className="border-2 border-teal-700 hover:border-white bg-white hover:bg-teal-700 text-slate-800 hover:text-white transition-colors duration-300 custom-btn"
          onClick={() => setCount((count) => count + 1)}
        >
          Count is {count}
        </button>
      </div>
    </>
  );
};

export default App;

Keputusan:

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

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

  return (
    <>
      <div className="card">
        <button
          className="custom-btn border-2 border-teal-700 bg-white text-slate-800 transition-colors duration-300 hover:border-white hover:bg-teal-700 hover:text-white"
          onClick={() => setCount((count) => count + 1)}
        >
          Count is {count}
        </button>
      </div>
    </>
  );
};

export default App;

Menyediakan Prettier-plugin-tailwindcss dalam Projek CSS Tailwind Sedia Ada

Jika projek anda sudah menyediakan Prettier, menyepadukan pemalam prettier-plugin-tailwindcss adalah mudah. Anda hanya perlu memasang pemalam dan mengkonfigurasinya. Jika Prettier belum dipasang, anda perlu menyediakannya bersama pemalam.

Untuk projek dengan persediaan yang lebih cantik sedia ada, jalankan:

bun add -D prettier-plugin-tailwindcss

Untuk projek tanpa persediaan yang lebih cantik, jalankan:

bun add -D prettier prettier-plugin-tailwindcss

Tambahkan pemalam pada konfigurasi Prettier sedia ada anda. Jika tiada konfigurasi Prettier sedia ada, Cipta fail .prettierrc dalam akar projek anda. Kemudian tambahkan yang berikut:

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

Pastikan Prettier berfungsi dengan betul dengan membuat perubahan pada fail dengan kelas CSS Tailwind. Simpan fail dan semak sama ada kelas CSS Tailwind diisih secara automatik.

Kesimpulan

Mengintegrasikan prettier-plugin-tailwindcss ke dalam projek CSS Tailwind baharu dan sedia ada meningkatkan aliran kerja pembangunan anda dengan memastikan pengisihan kelas yang konsisten dan teratur. Untuk projek baharu, anda boleh menyediakan Prettier dan pemalam secara serentak untuk menyelaraskan konfigurasi awal anda. Untuk projek sedia ada, cuma tambah pemalam pada persediaan Prettier sedia ada anda atau pasang Prettier dan pemalam jika Prettier belum dikonfigurasikan.

Untuk pilihan konfigurasi tambahan seperti mengisih kelas dalam atribut bukan standard, lawati dokumentasi prettier-plugin-tailwindcss.

Atas ialah kandungan terperinci Cara Menyediakan Pengisihan Kelas Automatik CSS Tailwind dengan Prettier dalam Projek Baharu dan Sedia Ada. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!