Meneroka token reka bentuk Typesafe dalam Tailwind 4

Tailwind 4 telah berada di kaki langit untuk seketika, dengan pasukan itu mula-mula membuka sumber kemajuan mereka pada Mac 2024. Salah satu perubahan yang paling penting, pada pendapat saya, ialah peralihan daripada konfigurasi berasaskan JavaScript kepada yang berasaskan CSS. Tailwind 4 kini dalam versi beta, dan daripada apa yang saya kumpulkan, pasukan masih menghadapi beberapa cabaran, terutamanya dengan keserasian Safari.

NOTA: Kemudian dalam artikel, kami akan menganggap anda menggunakan rangka kerja / perpustakaan berasaskan komponen, tetapi konsep yang dibincangkan mudah dipindahkan kepada pendekatan lain.

Perubahan dalam Tailwind 4

Perpindahan ke konfigurasi CSS

Saya telah mendengar beberapa aduan tentang perkara ini, terutamanya daripada pengguna TypeScript. Walau bagaimanapun, peta jalan untuk Tailwind 4.0 termasuk sokongan untuk tailwind.config.js klasik sebagai keutamaannya:

Sokongan untuk fail konfigurasi JavaScript — memperkenalkan semula keserasian dengan fail tailwind.config.js klasik untuk memudahkan pemindahan ke v4.

Nampaknya ini bertujuan terutamanya untuk tujuan penghijrahan dan mungkin bukan penyelesaian jangka panjang yang mampan.

Apakah maksud ini untuk Typesafety

Di bawah hud Tailwind 4 menggunakan peraturan CSS @property baharu untuk mentakrifkan sifat tersuai dalaman.

Kami menggunakan @property untuk menentukan sifat tersuai dalaman kami dengan jenis dan kekangan yang betul

Memandangkan saya tidak dapat mencari sokongan yang menyerlahkan sintaks yang baik untuk peraturan @property dalam kod VS, saya telah menghubungi Bluesky untuk melihat sama ada sesiapa yang lebih bertuah daripada saya.

Saya berharap sokongan @property yang lebih baik dapat membantu kami pada masa hadapan, lebih lanjut mengenainya kemudian.

Apakah peraturan CSS @property

Peraturan @property mewakili pendaftaran harta tersuai secara langsung dalam helaian gaya tanpa perlu menjalankan sebarang JavaScript. Peraturan @property yang sah menghasilkan harta tersuai berdaftar, yang serupa dengan memanggil registerProperty() dengan parameter yang setara.

Apakah token reka bentuk

Sekarang kita telah membincangkan perubahan yang akan datang dalam Tailwind 4 dan potensi kesannya, mari luangkan masa untuk bercakap tentang token reka bentuk. Jika anda tidak biasa dengan istilah tersebut, berikut ialah penjelasan ringkas: Token reka bentuk ialah kaedah untuk menyimpan dan mengurus keputusan reka bentuk dalam format yang konsisten dan boleh digunakan semula, biasanya sebagai pembolehubah. Ia mewakili sifat visual utama sistem reka bentuk, seperti warna, tipografi, jarak, bayang-bayang, dengan cara berstruktur. Matlamatnya ialah untuk memusatkan nilai reka bentuk ini supaya ia boleh dikemas kini, diselenggara dan dikongsi dengan mudah merentas platform dan alatan yang berbeza.

Sistem reka bentuk biasanya terdiri daripada dua jenis nilai utama: Nilai sistem dan nilai Komponen. Sebagai contoh, nilai sistem anda mungkin kelihatan seperti ini:

const SYSTEM_TOKENS: ISystemTokens = {
  /* ... */
  COLORS: {
    /* ... */
    GREEN: {
      LIGHT: "#E0E5D9",
      MEDIUM: "#3F6212",
      DARK: "#28331A",
    }
    /* ... */
  },
  TYPOGRAPHY: {
    /* ... */
  }
  /* ... */
}

Anda kemudian boleh merujuk nilai sistem anda dalam token komponen anda seperti ini:

import { SYSTEM_TOKENS } from "...";

const BUTTON_VALUES: IButtonTokens = {
  /* ... */
  COLORS: {
    /* ... */
    BACKGROUND: SYSTEM_TOKENS.COLORS.GREEN.DARK,
    /* ... */
  },
  TYPOGRAPHY: {
    /* ... */
  }
  /* ... */
}

Jika anda berminat untuk mengetahui lebih lanjut tentang sistem reka bentuk, anda patut meneroka sistem yang terkenal seperti Reka Bentuk Bahan.

Menstrukturkan token reka bentuk komponen dengan Tailwind

Kira-kira seminggu yang lalu, saya menulis artikel membincangkan pendekatan alternatif yang saya gunakan untuk mencipta varian komponen dengan Tailwind CSS. Secara ringkasnya, artikel itu meneroka cara kita boleh memanfaatkan pembolehubah CSS bersama Tailwind untuk mengurus varian kompleks, menetapkan nilai varian sebaris melalui prop komponen dinamik dan pemetaan pembolehubah. Jika anda ingin tahu tentang cara saya mencapai pendekatan ini, anda boleh membaca lebih lanjut mengenainya di sini: Pendekatan berbeza untuk menulis varian komponen dengan Tailwind CSS.

Kita harus bermula dengan mengenal pasti bahagian komponen kita yang bergantung pada token reka bentuk. Seperti yang dinyatakan sebelum ini, ini akan termasuk warna, tipografi, jarak dan sebarang nilai sistem tetap lain yang penting kepada reka bentuk anda. Mari kita lihat komponen Butang berikut, tanpa token reka bentuk:

<button>



<p>In the example above, we can pinpoint several values that can be tokenized. Each of the following classes could correspond to a value in our design system:</p>

<ul>
<li>p-4</li>
<li>bg-red</li>
<li>text-white</li>
</ul>

<p>Now that we've identified the values that can be tokenised, we can categorise them into two groups: static values and dynamic values. Static values are those in your component that remain constant, while dynamic values are those that can change based on the props passed to the component. For our example we'll make the padding (p-4) static, while the text colour (text-white) and background (bg-red) should be set dynamically via a theme prop.</p>

<h3>
  
  
  Creating the tokens
</h3>

<h4>
  
  
  Tailwind 4 config
</h4>

<p>First we need to define our System tokens in the new Tailwind CSS config:<br>
</p>

<pre class="brush:php;toolbar:false">@import "tailwindcss";

@theme {
  --color-white: #FFFFFF;
  --color-green-light: #E0E5D9;
  --color-green-medium: #3F6212;
  --color-green-dark: #28331A;
  --color-red-light: #F4CCCC;
  --color-red-medium: #D50000;
  --color-red-dark: #640000;

  --spacing-sm: 1rem;
  --spacing-md: 2rem;
}

Token sistem

Seterusnya kami perlu mencipta fail system.tokens.ts kami:

export type TColor = "--color-white" | "--color-green-light" | "--color-green-medium" | "--color-green-dark" | "--color-red-light" | "--color-red-medium" | "--color-red-dark";

export type TSpacing = "--spacing-sm" | "--spacing-md";


interface ISystemTokens {
  COLORS: {
    WHITE: TColor;
    GREEN: {
      LIGHT: TColor;
      MEDIUM: TColor;
      DARK: TColor;
    },
    RED: {
      LIGHT: TColor;
      MEDIUM: TColor;
      DARK: TColor;
    }
  },
  SPACING: {
    SMALL: TSpacing;
    MEDIUM: TSpacing;
  }
}

export const  SYSTEM_TOKENS: ISystemTokens {
  COLORS: {
    WHITE: "--color-white";
    GREEN: {
      LIGHT: "--color-green-light";
      MEDIUM: "--color-green-light";
      DARK: "--color-green-light";
    },
    RED: {
      LIGHT: "--color-red-light";
      MEDIUM: "--color-red-medium";
      DARK: "--color-red-dark";
    }
  },
  SPACING: {
    SMALL: "--spacing-sm";
    MEDIUM: "--spacing-md";
  }
}

Token reka bentuk sistem boleh dirujuk dalam reka bentuk seperti:
$system.COLORS.HIJAU.CAHAYA.

Dalam dunia yang ideal, kami boleh mengeksport terus jenis daripada peraturan @property fail CSS kami ke dalam jenis TColor dan TSpacing kami, sama seperti cara import SCSS boleh diubah menjadi JavaScript. Malangnya, setakat ini, sepanjang pengetahuan saya, ini tidak boleh dilakukan.

Token komponen

Sekarang kami telah melaksanakan token sistem kami, kami boleh mula menyepadukannya ke dalam komponen kami. Langkah pertama ialah menyediakan fail .tokens.ts kami. Untuk menggambarkan perkara ini, mari kita ambil contoh komponen Button yang kita lihat sebelum ini dan buat fail Button.tokens.ts yang sepadan.

Untuk mengimbas kembali, berikut ialah cara komponen Butang kami distrukturkan:

<button>



<p>Earlier, we discussed the distinction between static values (like p-4) and dynamic values (like bg-red and text-white). This distinction will guide how we organise our design tokens. Static properties, like p-4, should be grouped under STATIC, while dynamic properties, like bg-red and text-white, should be grouped under the appropriate prop identifier. In this case, since we’re controlling bg-red and text-white through a theme prop, they should be placed under the THEME section in our tokens file. For our example we'll assume 2 theme variables - PRIMARY and SECONDARY.<br>
</p>

<pre class="brush:php;toolbar:false">import { SYSTEM_TOKENS, TColor, TSpacing } from "./system.tokens.ts";
import { TTheme } from "./Button"; // PRIMARY, SECONDARY

interface IButtonStaticTokens {
  padding: TSpacing;
}

interface IButtonThemeTokens {
  backgroundColor: TColor;
  textColor: TColor;
}

export const STATIC: IButtonStaticTokens {
  padding: "--spacing-sm";
}

export const THEME: IButtonStaticTokens {
  PRIMARY: {
    backgroundColor: "--color-red-dark";
    textColor: "--color-red-light";
  },
  SECONDARY: {
    backgroundColor: "--color-green-dark";
    textColor: "--color-green-light";
  };
}

Token reka bentuk komponen boleh dirujuk dalam reka bentuk seperti: $component.Button.THEME.PRIMARY.backgroundColor. Keutamaan saya untuk menamakan konvensyen ialah menggunakan:
$component...tokenName

$komponen: Bezakan antara token $sistem dan $komponen
: Ikuti konvensyen penamaan fail dalaman untuk komponen
PROP_NAME: Kes malar
PROP_VALUE: Hendaklah mengikut selongsong nilai prop dalaman
Nama token (warna latar belakang): Sarung unta*

Ini akhirnya adalah soal keutamaan peribadi dan terpulang kepada anda untuk memutuskan perkara yang paling sesuai untuk aliran kerja anda.

• Apabila menamakan token, saya menyimpang sedikit daripada kotak Camel jika saya perlu menentukan token untuk keadaan elemen, seperti :hover. Dalam kes tersebut, saya awalan nama token dengan keadaan diikuti dengan dua garis bawah, seperti: hover__backgroundColor.

Menggunakan token reka bentuk dalam komponen

Seperti yang saya nyatakan sebelum ini dalam artikel, saya sebelum ini menulis tentang meneroka pendekatan berbeza untuk menulis varian komponen dengan CSS Tailwind. Saya akan merujuk pendekatan itu di sini, jadi jika anda belum membacanya lagi, mungkin berguna untuk menyemaknya terlebih dahulu untuk memahami konteks di sebalik kaedah ini.

Bahagian artikel ini akan menganggap anda menggunakan rangka kerja atau pustaka Javascript untuk membina komponen anda.

Mengemas kini komponen Butang

Kita perlu menggantikan kelas boleh token sedia ada dengan kelas Tailwind yang dikuasakan oleh pembolehubah css. Perhatikan nama pembolehubah sepadan dengan antara muka token komponen 2 Butang kami, IButtonStaticTokens dan IButtonThemeTokens;

butang<



<p>Sekarang kami telah mengemas kini kelas kami, kami perlu menggunakan gaya komponen secara dinamik dan mengemas kini pembolehubah. Untuk mencapai ini, kami akan menggunakan fungsi variableMap pada komponen. Pada asasnya, fungsi ini memetakan token kami daripada Button.tokens.ts kepada pembolehubah CSS sebaris terus pada komponen, yang kemudiannya boleh dirujuk oleh kelas kami. Untuk contoh peta berubah, sila lihat penghujung artikel ini.<br>
</p>

<pre class="brush:php;toolbar:false"><templat>
  <butang
    :style="[variableMap(STATIC), variableMap(THEME[props.THEME])]"
   >



<h2>
  
  
  Kesimpulan
</h2>

<p>Saya tidak sabar untuk mengeluarkan Tailwind 4 dan perubahan yang dilakukan oleh pasukan antara sekarang dan kemudian. Saya seronok bereksperimen dengan idea untuk menangani beberapa cabaran sekitar token reka bentuk, varian dan keselamatan jenis.</p>

<p>Ini adalah pendekatan percubaan yang saya pasti akan ada beberapa pendapat yang kukuh.</p>

<p>Jika anda mendapati artikel ini menarik atau berguna, sila ikuti saya di Bluesky (saya paling aktif di sini), Medium, Dev dan/atau Twitter.</p>


          

            
        

Atas ialah kandungan terperinci Meneroka token reka bentuk Typesafe dalam Tailwind 4. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!