


Ruby on Rails Fast Frontend Menggunakan CSS-Zero sebagai Rangka Kerja CSS Tanpa Kelas
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 `<!-- ... --> </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!

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

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,

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

Peter-Paul menyiarkan soalan ini:

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

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

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

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


Alat AI Hot

Undresser.AI Undress
Apl berkuasa AI untuk mencipta foto bogel yang realistik

AI Clothes Remover
Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.

Undress AI Tool
Gambar buka pakaian secara percuma

Clothoff.io
Penyingkiran pakaian AI

AI Hentai Generator
Menjana ai hentai secara percuma.

Artikel Panas

Alat panas

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
Disyorkan: Versi Win, menyokong gesaan kod!

SublimeText3 versi Cina
Versi Cina, sangat mudah digunakan

Dreamweaver Mac版
Alat pembangunan web visual

VSCode Windows 64-bit Muat Turun
Editor IDE percuma dan berkuasa yang dilancarkan oleh Microsoft