Ruby on Rails Fast Frontend utilisant CSS-Zero comme framework CSS sans classe

Cet article est très similaire aux articles précédents de cette série, mais cette fois nous utiliserons le framework Tailwind comme framework CSS sans classe. L'article est inspiré de l'article "Classless CSS based on Tailwind".

Créer une nouvelle application Rails

• rails serve Le time avant la commande permet d'afficher la durée totale d'exécution de la commande. L'exemple suivant a pris 47 secondes.

$ rails -v
Rails 8.0.0

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

Rails 8, basé sur sa philosophie « sans construction », utilise Prop Shaft comme bibliothèque de pipeline de ressources et Importmap comme bibliothèque JavaScript par défaut. Importmap ne fait rien avec JavaScript.

Ouvrez le projet à l'aide de VSCode ou de votre éditeur préféré

$ cd classless-css-tailwind && code .

Créez quelques pages pour prévisualiser les styles des éléments HTML

La page se trouve dans la section « Étapes communes » du premier article de la série.

Modifier le fichier Tailwind app/assets/stylesheets/application.tailwind.css

Agrandir…

Modifiez le fichier ci-dessus pour inclure une référence au fichier de style CSS Tailwind. Notez que seule l’option 1 n’est pas commentée.

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

Créez un dossier app/assets/stylesheets/ sous le répertoire custom_tailwind pour ajouter des fichiers Tailwind personnalisés.

Ajouter du contenu au premier fichier Tailwind personnalisé custom1.css

Agrandir…

Créez le fichier `app/assets/stylesheets/custom_tailwind/custom1.css` et copiez le contenu suivant :

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

Ajouter du contenu au deuxième fichier Tailwind personnalisé custom2.css

Agrandir…

Créez le fichier `app/assets/stylesheets/custom_tailwind/custom2.css` et copiez le contenu suivant :

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

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

Ajouter du contenu au troisième fichier Tailwind personnalisé custom3.css

Agrandir…

Créez le fichier `app/assets/stylesheets/custom_tailwind/custom3.css` et copiez le contenu suivant :

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

Supprimer le nom de la classe Tailwind du app/views/layouts/application.html.erb fichier

Agrandir…

Dans le fichier `application.html.erb`, supprimez ou commentez la balise `

` pour vous assurer qu'elle n'affecte pas le comportement des styles personnalisés que nous avons créés pour Tailwind.

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

Plus d'étapes pour que les styles Tailwind personnalisés prennent effet

Agrandir…

Si vous avez suivi les étapes ci-dessus, le fichier `app/assets/stylesheets/application.tailwind.css` ne doit contenir qu'une seule ligne non commentée `@import "./custom_tailwind/custom1.css";`.

Il ne devrait y avoir qu'un seul style non commenté. Pour tester d'autres styles, commentez d'abord le style que vous utilisez actuellement, puis décommentez l'autre style que vous souhaitez tester.

Après avoir sélectionné un style personnalisé disponible, exécutez la commande suivante :

$ rails -v
Rails 8.0.0

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

Si la commande ci-dessus ne parvient pas à rendre l'élément HTML efficace, veuillez d'abord effacer le fichier précédent, puis recompiler :

$ cd classless-css-tailwind && code .

Maintenant, un HTML stylisé ?

Après avoir configuré Tailwind avec les personnalisations ci-dessus et démarré le serveur Rails, vous verrez du HTML stylisé.

Mode sombre

Certains styles ont des options de mode sombre. Pour confirmer, modifiez le thème dans les paramètres de personnalisation des couleurs de votre ordinateur. Recherchez dans Windows « activer le mode sombre pour les applications » et basculez entre le mode sombre et le mode clair. Après avoir modifié les paramètres du système d'exploitation, la page HTML devrait automatiquement changer pour indiquer qu'elle prend en charge les modes clair et sombre.

Prochaines étapes

[x] Organisez les styles selon vos préférences ; [x] Utilisez les fichiers CSS dans le projet pour le style, sans utiliser CDN ; [x] Utilisez Tailwind pour copier les fonctionnalités des frameworks CSS sans classe ; [-] Utilisez Rails Live Reload pour mettre à jour dynamiquement les modifications du projet dans le navigateur ; [-] Si vous souhaitez passer plus de temps sur le front-end, consultez les options de personnalisation de vos styles préférés

 ;

Matériels de référence

• 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

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!