<code class="language-erb"> <!-- ... --> </main></code>
Nach dem Login kopieren
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“.
rails serve Das time vor dem Befehl wird verwendet, um die Gesamtzeit der Befehlsausführung anzuzeigen. Das folgende Beispiel dauerte 47 Sekunden. <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 verwendet standardmäßig Propshaft als Ressourcen-Pipeline-Bibliothek und Importmap als JavaScript-Bibliothek, basierend auf seiner „No Build“-Philosophie. Importmap macht nichts mit JavaScript.
<code class="language-bash">$ cd classless-css-tailwind && code .</code>
Die Seite befindet sich im Abschnitt „Allgemeine Schritte“ des ersten Artikels der Serie.
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>
Erstellen Sie einen Ordner app/assets/stylesheets/ im Verzeichnis custom_tailwind, um benutzerdefinierte Tailwind-Dateien hinzuzufügen.
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 Datei<code class="language-erb"> <!-- ... --> </main></code>
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:
<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>
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:
<code class="language-bash">$ cd classless-css-tailwind && code .</code>
Nachdem Sie Tailwind mit den oben genannten Anpassungen konfiguriert und den Rails-Server gestartet haben, sehen Sie gestaltetes HTML.
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.
[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
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!
Wie Redis die Datenkonsistenz löst
MySQL-Datenbank erstellen
Empfohlene benutzerfreundliche und formelle Software-Apps für Währungsspekulationen im Jahr 2024
Mobiltelefon-Zweitkarte
Wie man mit virtueller Währung handelt
es6 neue Eigenschaften
So überprüfen Sie den MD5-Wert
So laden Sie eine FLV-Datei herunter
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
