<code class="language-erb"> <!-- ... --> </main></code>
Salin selepas log masuk
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".
rails serve time sebelum arahan digunakan untuk memaparkan jumlah masa pelaksanaan arahan. Contoh berikut mengambil masa 47 saat. <code class="language-bash">$ rails -v Rails 8.0.0 $ time rails new classless-css-tailwind ... real 0m47.500s user 0m33.052s sys 0m4.249s</code>
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.
<code class="language-bash">$ cd classless-css-tailwind && code .</code>
Halaman tersebut berada di bahagian "Langkah Biasa" dalam artikel pertama dalam siri ini.
app/assets/stylesheets/application.tailwind.css
<code class="language-css">/* 在顶部插入自定义的 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; */</code>
Buat folder app/assets/stylesheets/ di bawah direktori custom_tailwind untuk menambah fail Tailwind tersuai.
custom1.css <code class="language-css">/*
概述：
统一主题变量（我们只使用 --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 中手动控制主题即可。
*/</code>custom2.css <code class="language-css">/* =================================================================
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;
// ... (其余样式代码，与原文相同) ...</code>custom3.css
<code class="language-css">// ... (其余样式代码，与原文相同) ...</code>
app/views/layouts/application.html.erb fail<code class="language-erb"> <!-- ... --> </main></code>
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:
<code class="language-bash">$ rails -v Rails 8.0.0 $ time rails new classless-css-tailwind ... real 0m47.500s user 0m33.052s sys 0m4.249s</code>
Jika arahan di atas tidak dapat menjadikan elemen HTML berkesan, sila kosongkan fail sebelumnya dahulu, dan kemudian prakompil semula:
<code class="language-bash">$ cd classless-css-tailwind && code .</code>
Selepas mengkonfigurasi Tailwind dengan penyesuaian di atas dan memulakan pelayan Rails, anda akan melihat HTML yang digayakan.
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.
[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 rujukanAtas 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!
Bagaimana redis menyelesaikan ketekalan data
mysql mencipta pangkalan data
Disyorkan apl perisian spekulasi mata wang yang mudah digunakan dan formal pada tahun 2024
Kad kedua telefon bimbit
Bagaimana untuk berdagang mata wang maya
es6 ciri baharu
Bagaimana untuk menyemak nilai MD5
Bagaimana untuk memuat turun fail flv
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
