cari
Rumahhujung hadapan webtutorial cssRuby on Rails Fast Frontend Menggunakan CSS-Zero sebagai Rangka Kerja CSS Tanpa Kelas

Ruby on Rails  Frontend Rápido Usando CSS-Zero como um Frameworks CSS Classless

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!

Kenyataan
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Banyak cara untuk memasukkan CSS dalam aplikasi JavaScriptBanyak cara untuk memasukkan CSS dalam aplikasi JavaScriptApr 19, 2025 am 10:08 AM

Selamat datang ke topik yang sangat kontroversial di tanah pembangunan depan! Saya yakin bahawa majoriti anda membaca ini telah menemui pameran anda

Memperkenalkan Netlify AnalyticsMemperkenalkan Netlify AnalyticsApr 19, 2025 am 10:07 AM

Anda bekerja sebentar di projek sampingan. Anda fikir ia cukup keren! Anda memutuskan untuk melepaskannya ke dunia. Dan kemudian ... ia berjalan lancar. Atau ia tidak berjalan lancar. Tunggu,

Lima kaedah untuk penilaian lima bintangLima kaedah untuk penilaian lima bintangApr 19, 2025 am 10:04 AM

Dalam dunia suka dan statistik sosial, ulasan adalah kaedah yang sangat penting untuk meninggalkan maklum balas. Pengguna sering suka mengetahui pendapat orang lain sebelum ini

Animasi dengan laluan klipAnimasi dengan laluan klipApr 19, 2025 am 09:52 AM

Jalan klip adalah salah satu daripada sifat-sifat CSS yang biasanya kita ketahui ada di sana tetapi mungkin tidak dapat dicapai untuk apa jua sebab. Ia agak menakutkan dalam erti kata

Menggunakan Taman Permainan Graphql dengan GatsbyMenggunakan Taman Permainan Graphql dengan GatsbyApr 19, 2025 am 09:51 AM

Saya mengandaikan kebanyakan anda telah mendengar tentang Gatsby, dan sekurang -kurangnya longgar tahu bahawa ia pada dasarnya merupakan penjana tapak statik untuk tapak React. Secara amnya

Jenis atau ujian: Mengapa tidak kedua -duanya?Jenis atau ujian: Mengapa tidak kedua -duanya?Apr 19, 2025 am 09:50 AM

Setiap sekarang dan kemudian, perdebatan menyala tentang nilai JavaScript yang ditaip. "Hanya tulis lebih banyak ujian!" menjerit beberapa lawan. "Gantikan ujian unit dengan jenis!"

Antara muka pengguna grafik untuk gitAntara muka pengguna grafik untuk gitApr 19, 2025 am 09:46 AM

Lemme mengulangi apa yang kelihatan seperti pemain utama untuk GIT GUI hari ini.

See all articles

Alat AI Hot

Undresser.AI Undress

Undresser.AI Undress

Apl berkuasa AI untuk mencipta foto bogel yang realistik

AI Clothes Remover

AI Clothes Remover

Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.

Undress AI Tool

Undress AI Tool

Gambar buka pakaian secara percuma

Clothoff.io

Clothoff.io

Penyingkiran pakaian AI

AI Hentai Generator

AI Hentai Generator

Menjana ai hentai secara percuma.

Alat panas

mPDF

mPDF

mPDF ialah perpustakaan PHP yang boleh menjana fail PDF daripada HTML yang dikodkan UTF-8. Pengarang asal, Ian Back, menulis mPDF untuk mengeluarkan fail PDF "dengan cepat" dari tapak webnya dan mengendalikan bahasa yang berbeza. Ia lebih perlahan dan menghasilkan fail yang lebih besar apabila menggunakan fon Unicode daripada skrip asal seperti HTML2FPDF, tetapi menyokong gaya CSS dsb. dan mempunyai banyak peningkatan. Menyokong hampir semua bahasa, termasuk RTL (Arab dan Ibrani) dan CJK (Cina, Jepun dan Korea). Menyokong elemen peringkat blok bersarang (seperti P, DIV),

SublimeText3 versi Inggeris

SublimeText3 versi Inggeris

Disyorkan: Versi Win, menyokong gesaan kod!

SublimeText3 versi Cina

SublimeText3 versi Cina

Versi Cina, sangat mudah digunakan

Dreamweaver Mac版

Dreamweaver Mac版

Alat pembangunan web visual

VSCode Windows 64-bit Muat Turun

VSCode Windows 64-bit Muat Turun

Editor IDE percuma dan berkuasa yang dilancarkan oleh Microsoft