Ruby on Rails Fast Frontend Menggunakan CSS-Zero sebagai Rangka Kerja CSS Tanpa Kelas

Artikel ini hampir sama dengan artikel sebelumnya dalam siri ini, tetapi kali ini kami akan menggunakan rangka kerja Tailwind sebagai rangka kerja CSS tanpa kelas. Artikel ini diilhamkan oleh artikel "Classless CSS based on Tailwind".

Buat apl Rails baharu

• rails serve time sebelum arahan digunakan untuk memaparkan jumlah masa pelaksanaan arahan. Contoh berikut mengambil masa 47 saat.

$ rails -v
Rails 8.0.0

$ time rails new classless-css-tailwind
...
real    0m47.500s
user    0m33.052s
sys     0m4.249s

Rails 8, berdasarkan falsafah "tiada binaan", menggunakan Propshaft sebagai pustaka saluran paip sumber dan Importmap sebagai pustaka JavaScript secara lalai. Importmap tidak melakukan apa-apa dengan JavaScript.

Buka projek menggunakan VSCode atau editor kegemaran anda

$ cd classless-css-tailwind && code .

Buat beberapa halaman untuk pratonton gaya elemen HTML

Halaman tersebut berada di bahagian "Langkah Biasa" dalam artikel pertama dalam siri ini.

Ubah suai fail Tailwind app/assets/stylesheets/application.tailwind.css

Kembangkan…

Ubah suai fail di atas untuk memasukkan rujukan kepada fail gaya CSS Tailwind. Ambil perhatian bahawa hanya pilihan 1 tidak diulas.

/* 在顶部插入自定义的 Tailwind CSS */
/* 如果“@tailwind base”、“@tailwind components”和“@tailwind utilities”没有被注释 */

/* 选项 1：绿色 */
@import "./custom_tailwind/custom1.css";

/* 选项 2：蓝色 */
/* @import "./custom_tailwind/custom2.css"; */

/* 选项 3：来自文章“基于 Tailwind 的无类名 CSS” */
/* https://www.php.cn/link/9220e33481b237d9d5d19112688f6dd4 */
/* @import "./custom_tailwind/custom3.css"; */

/* @tailwind base;
@tailwind components;
@tailwind utilities; */

Buat folder app/assets/stylesheets/ di bawah direktori custom_tailwind untuk menambah fail Tailwind tersuai.

Tambah kandungan pada fail Tailwind tersuai pertama custom1.css

Kembangkan…

Cipta fail `app/assets/stylesheets/custom_tailwind/custom1.css` dan salin kandungan berikut:

/*
  概述：
    统一主题变量（我们只使用 --background、--text 和 --accent 等，而不是 --background-light 和 --background-dark）。
    减少 @media (prefers-color-scheme: dark) 的重复。大部分深色主题都集中在 :root 中。
    我们使用变量代替直接颜色，并在某些地方利用 Tailwind 的命名。

    如果您使用类（class="dark"）而不是 prefers-color-scheme 来使用深色模式，
    逻辑会略有不同（使用 dark:bg-*、dark:text-* 等）。
    但是，根据建议，我们保留了 @media (prefers-color-scheme: dark) 以尊重用户的偏好。


  1. 统一的主题变量
  现在我们使用 --background、--text 和 --accent（以及其他）代替 --background-light、--background-dark 等。
  这减少了重复，使代码更易于维护。

  2. 减少 @media (prefers-color-scheme: dark) 的重复
  几乎所有深色主题的内容都集中在一个块中，位于 :root 内。
  因此，每当用户偏好深色模式时，所有变量都会被重新定义。

  3. 使用补充变量
  我们添加了 --background-code、--border、--form-border 和 --focus-ring，以确保所有可能根据主题变化的颜色都易于修改。

  4. 优化的表单样式
  我们统一了大多数表单元素，而不是将每种输入类型分成多个块。
  这避免了重复，并保持了设计的一致性。

---
  最终说明

  如果您想进一步遵循 Tailwind 的标准，减少变量的使用，您可以使用标准的实用程序类
  (bg-gray-50、text-gray-900、dark:bg-gray-800、dark:text-gray-100 等)。
  对于那些更喜欢使用 .dark 类来实现深色模式的用户，只需将 @media (prefers-color-scheme: dark)
  替换为文件中的 .dark & { ... } 选择器，并使用 JavaScript 或在 HTML 中手动控制主题即可。
*/

Tambah kandungan pada fail Tailwind tersuai kedua custom2.css

Kembangkan…

Cipta fail `app/assets/stylesheets/custom_tailwind/custom2.css` dan salin kandungan berikut:

/* =================================================================
   CSS 变量配置
   集中定义项目的所有变量
   ================================================================= */
:root {
  /* 颜色 - 浅色主题 */
  --color-primary: #2563eb; /* Tailwind 的 blue-600 */
  --color-primary-hover: #1d4ed8; /* Tailwind 的 blue-700 */
  --color-background: #ffffff;
  --color-text: #1f2937; /* Tailwind 的 gray-800 */
  --color-text-muted: #4b5563; /* Tailwind 的 gray-600 */
  --color-border: #d1d5db; /* Tailwind 的 gray-300 */
  --color-input-bg: #f9fafb; /* Tailwind 的 gray-50 */
  --color-code-bg: #f3f4f6; /* Tailwind 的 gray-100 */
  --color-code-text: #273e65; /* Tailwind 的 blue-800 */

  /* 间距 */
  --spacing-base: 1rem;
  --spacing-lg: 1.5rem;
  --spacing-xl: 2rem;

  /* 圆角 */
  --radius-base: 0.375rem;
  --radius-lg: 0.5rem;

  /* 最大宽度 */
  --max-width-content: 48rem; /* 768px */
}

/* 使用 prefers-color-scheme 配置深色主题 */
@media (prefers-color-scheme: dark) {
  :root {
    /* 颜色 - 深色主题 */
    --color-primary: #0284c7; /* Tailwind 的 sky-600 */
    --color-primary-hover: #6990c7; /* Tailwind 的 blue-400 */
    --color-background: #111827; /* Tailwind 的 gray-900 */
    --color-text: #f3f4f6; /* Tailwind 的 gray-100 */
    --color-text-muted: #9ca3af; /* Tailwind 的 gray-400 */
    --color-border: #374151; /* Tailwind 的 gray-700 */
    --color-input-bg: #1f2937; /* Tailwind 的 gray-800 */
    --color-code-bg: #1f2937; /* Tailwind 的 gray-800 */
    --color-code-text: #e8ecf6; /* Tailwind 的 blue-100 */
  }
}

/* Tailwind 导入 */
@tailwind base;
@tailwind components;
@tailwind utilities;

// ... (其余样式代码，与原文相同) ...

Tambah kandungan pada fail Tailwind tersuai ketiga custom3.css

Kembangkan…

Cipta fail `app/assets/stylesheets/custom_tailwind/custom3.css` dan salin kandungan berikut:

// ... (其余样式代码，与原文相同) ...

Alih keluar nama kelas Tailwind daripada app/views/layouts/application.html.erb fail

Kembangkan…

Dalam fail `application.html.erb`, alih keluar atau ulas keluar teg `

` untuk memastikan ia tidak menjejaskan gelagat gaya tersuai yang kami buat untuk Tailwind.

    <!-- ... -->
</main>

Lagi langkah untuk menjadikan gaya Tailwind tersuai berkuat kuasa

Kembangkan…

Jika anda mengikut langkah di atas, fail `app/assets/stylesheets/application.tailwind.css` hendaklah mengandungi hanya satu baris tidak diulas `@import "./custom_tailwind/custom1.css";`.

Hanya ada satu gaya yang tidak diulas. Untuk menguji gaya lain, mula-mula ulas gaya yang sedang anda gunakan, kemudian nyahulas gaya lain yang ingin anda uji.

Selepas memilih gaya tersuai yang tersedia, laksanakan arahan berikut:

$ rails -v
Rails 8.0.0

$ time rails new classless-css-tailwind
...
real    0m47.500s
user    0m33.052s
sys     0m4.249s

Jika arahan di atas tidak dapat menjadikan elemen HTML berkesan, sila kosongkan fail sebelumnya dahulu, dan kemudian prakompil semula:

$ cd classless-css-tailwind && code .

Sekarang, HTML yang digayakan?

Selepas mengkonfigurasi Tailwind dengan penyesuaian di atas dan memulakan pelayan Rails, anda akan melihat HTML yang digayakan.

Mod Gelap

Sesetengah gaya mempunyai pilihan mod gelap. Untuk mengesahkan, tukar tema dalam tetapan pemperibadian warna komputer anda. Cari Windows untuk "dayakan mod gelap untuk apl" dan togol antara mod gelap dan mod terang. Selepas menukar tetapan sistem pengendalian, halaman HTML harus berubah secara automatik untuk menunjukkan bahawa ia menyokong mod terang dan gelap.

Langkah Seterusnya

[x] Susun gaya mengikut keutamaan anda; [x] Gunakan fail CSS dalam projek untuk penggayaan, tanpa menggunakan CDN; [x] Gunakan Tailwind untuk menyalin kefungsian rangka kerja CSS tanpa kelas; [-] Gunakan Rails Live Reload untuk mengemas kini perubahan projek secara dinamik dalam penyemak imbas; [-] Jika anda ingin meluangkan lebih banyak masa di bahagian hadapan, lihat pilihan penyesuaian untuk gaya kegemaran anda;

Bahan rujukan

• https://www.php.cn/link/9220e33481b237d9d5d19112688f6dd4
• https://www.php.cn/link/cc0a521e0f695aa06ed11384fb616ac3
• https://www.php.cn/link/dfae769c739093f5225cecaf4d5a612f
• https://www.php.cn/link/930473a02d035f62b3c3c2628a284416
• https://www.php.cn/link/c42c101f89ec57e54230d611f74d5ae1
• https://www.php.cn/link/3f37c010783748f8e8577f732d74054c
• https://www.php.cn/link/480167897cc43b2fb914238f45d7dbbf
• https://www.php.cn/link/c48eb27d5b0a288f5bbf1545c218e001

Atas ialah kandungan terperinci Ruby on Rails Fast Frontend Menggunakan CSS-Zero sebagai Rangka Kerja CSS Tanpa Kelas. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!