Schnelles Ruby on Rails-Frontend mit CSS-Zero als klassenloses CSS-Framework

Dieser Artikel ist den vorherigen Artikeln dieser Serie sehr ähnlich, aber dieses Mal werden wir das Tailwind-Framework als klassenloses CSS-Framework verwenden. Der Artikel ist inspiriert vom Artikel „Classless CSS based on Tailwind“.

Erstellen Sie eine neue Rails-App

• rails serve Das time vor dem Befehl wird verwendet, um die Gesamtzeit der Befehlsausführung anzuzeigen. Das folgende Beispiel dauerte 47 Sekunden.

$ rails -v
Rails 8.0.0

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

Rails 8 verwendet standardmäßig Propshaft als Ressourcen-Pipeline-Bibliothek und Importmap als JavaScript-Bibliothek, basierend auf seiner „No Build“-Philosophie. Importmap macht nichts mit JavaScript.

Öffnen Sie das Projekt mit VSCode oder Ihrem bevorzugten Editor

$ cd classless-css-tailwind && code .

Erstellen Sie einige Seiten, um eine Vorschau der Stile von HTML-Elementen anzuzeigen

Die Seite befindet sich im Abschnitt „Allgemeine Schritte“ des ersten Artikels der Serie.

Tailwind-Datei ändern app/assets/stylesheets/application.tailwind.css

Erweitern…

Ändern Sie die obige Datei so, dass sie einen Verweis auf die Tailwind-CSS-Stildatei enthält. Beachten Sie, dass nur Option 1 unkommentiert ist.

/* 在顶部插入自定义的 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; */

Erstellen Sie einen Ordner app/assets/stylesheets/ im Verzeichnis custom_tailwind, um benutzerdefinierte Tailwind-Dateien hinzuzufügen.

Inhalt zur ersten benutzerdefinierten Tailwind-Datei hinzufügen custom1.css

Erweitern…

Erstellen Sie die Datei „app/assets/stylesheets/custom_tailwind/custom1.css“ und kopieren Sie den folgenden Inhalt:

/*
  概述：
    统一主题变量（我们只使用 --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 中手动控制主题即可。
*/

Inhalt zur zweiten benutzerdefinierten Tailwind-Datei hinzufügen custom2.css

Erweitern…

Erstellen Sie die Datei „app/assets/stylesheets/custom_tailwind/custom2.css“ und kopieren Sie den folgenden Inhalt:

/* =================================================================
   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;

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

Inhalt zur dritten benutzerdefinierten Tailwind-Datei hinzufügen custom3.css

Erweitern…

Erstellen Sie die Datei „app/assets/stylesheets/custom_tailwind/custom3.css“ und kopieren Sie den folgenden Inhalt:

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

Tailwind-Klassennamen aus der app/views/layouts/application.html.erb Datei

entfernen

Erweitern…

Entfernen oder kommentieren Sie in der Datei „application.html.erb“ das Tag „

“, um sicherzustellen, dass es das Verhalten der benutzerdefinierten Stile, die wir für Tailwind erstellt haben, nicht beeinträchtigt.

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

Weitere Schritte, damit benutzerdefinierte Tailwind-Stile wirksam werden

Erweitern…

Wenn Sie die obigen Schritte ausgeführt haben, sollte die Datei „app/assets/stylesheets/application.tailwind.css“ nur eine unkommentierte Zeile „@import "./custom_tailwind/custom1.css";` enthalten.

Es sollte nur einen Stil geben, der nicht kommentiert ist. Um andere Stile zu testen, kommentieren Sie zunächst den Stil aus, den Sie gerade verwenden, und entfernen Sie dann die Auskommentierung des anderen Stils, den Sie testen möchten.

Nachdem Sie einen verfügbaren benutzerdefinierten Stil ausgewählt haben, führen Sie den folgenden Befehl aus:

$ rails -v
Rails 8.0.0

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

Wenn der obige Befehl das HTML-Element nicht wirksam machen kann, löschen Sie bitte zuerst die vorherige Datei und führen Sie dann eine erneute Vorkompilierung durch:

$ cd classless-css-tailwind && code .

Nun ein gestalteter HTML-Code?

Nachdem Sie Tailwind mit den oben genannten Anpassungen konfiguriert und den Rails-Server gestartet haben, sehen Sie gestaltetes HTML.

Dunkler Modus

Einige Stile verfügen über Dunkelmodusoptionen. Ändern Sie zur Bestätigung das Thema in den Farbpersonalisierungseinstellungen Ihres Computers. Suchen Sie in Windows nach „Dunkelmodus für Apps aktivieren“ und wechseln Sie zwischen Dunkelmodus und Hellmodus. Nach der Änderung der Betriebssystemeinstellungen sollte sich die HTML-Seite automatisch ändern, um anzuzeigen, dass sie helle und dunkle Modi unterstützt.

Nächste Schritte

[x] Organisieren Sie Stile nach Ihren Wünschen; [x] CSS-Dateien im Projekt zum Stylen verwenden, ohne CDN zu verwenden; [x] Verwenden Sie Tailwind, um die Funktionalität klassenloser CSS-Frameworks zu kopieren; [-] Verwenden Sie Rails Live Reload, um Projektänderungen im Browser dynamisch zu aktualisieren; [-] Wenn Sie mehr Zeit mit dem Frontend verbringen möchten, schauen Sie sich die Anpassungsoptionen für Ihre Lieblingsstile an

Referenzmaterialien

• 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

Das obige ist der detaillierte Inhalt vonSchnelles Ruby on Rails-Frontend mit CSS-Zero als klassenloses CSS-Framework. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!