CSS-Zero를 클래스 없는 CSS 프레임워크로 사용하는 Ruby on Rails 빠른 프런트엔드

이 기사는 이 시리즈의 이전 기사와 매우 유사하지만 이번에는 Tailwind 프레임워크를 클래스 없는 CSS 프레임워크로 사용하겠습니다. 이 기사는 "Tailwind 기반 클래스 없는 CSS" 기사에서 영감을 받았습니다.

새 Rails 앱 만들기

• rails serve 명령 앞의 time은 명령 실행의 총 시간을 표시하는 데 사용됩니다. 다음 예에서는 47초가 걸렸습니다.

$ rails -v
Rails 8.0.0

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

Rails 8은 "빌드 없음" 철학을 기반으로 기본적으로 Propshaft를 리소스 파이프라인 라이브러리로 사용하고 Importmap을 JavaScript 라이브러리로 사용합니다. Importmap은 JavaScript로 아무 작업도 수행하지 않습니다.

VSCode 또는 선호하는 편집기를 사용하여 프로젝트를 엽니다

$ cd classless-css-tailwind && code .

HTML 요소의 스타일을 미리 볼 수 있는 페이지 만들기

이 페이지는 시리즈 첫 번째 기사의 '일반 단계' 섹션에 있습니다.

Tailwind 파일 수정 app/assets/stylesheets/application.tailwind.css

확장…

Tailwind CSS 스타일 파일에 대한 참조를 포함하도록 위 파일을 수정합니다. 옵션 1만 주석 처리되지 않았습니다.

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

app/assets/stylesheets/ 디렉터리 아래에 custom_tailwind 폴더를 만들어 맞춤 Tailwind 파일을 추가하세요.

첫 번째 맞춤 Tailwind 파일에 콘텐츠 추가 custom1.css

확장…

`app/assets/stylesheets/custom_tailwind/custom1.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 中手动控制主题即可。
*/

두 번째 맞춤 Tailwind 파일에 콘텐츠 추가 custom2.css

확장…

`app/assets/stylesheets/custom_tailwind/custom2.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;

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

세 번째 맞춤 Tailwind 파일에 콘텐츠 추가 custom3.css

확장…

`app/assets/stylesheets/custom_tailwind/custom3.css` 파일을 만들고 다음 콘텐츠를 복사합니다.

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

app/views/layouts/application.html.erb 파일에서 Tailwind 클래스 이름 제거

확장…

`application.html.erb` 파일에서 `

` 태그를 제거하거나 주석 처리하여 Tailwind용으로 만든 맞춤 스타일의 동작에 영향을 주지 않는지 확인하세요.

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

맞춤 Tailwind 스타일을 적용하기 위한 추가 단계

확장…

위 단계를 따랐다면 `app/assets/stylesheets/application.tailwind.css` 파일에는 주석 처리되지 않은 `@import "./custom_tailwind/custom1.css";` 줄 하나만 포함되어야 합니다.

주석 처리되지 않은 스타일은 하나만 있어야 합니다. 다른 스타일을 테스트하려면 먼저 현재 사용 중인 스타일을 주석 처리한 다음 테스트하려는 다른 스타일의 주석 처리를 제거하세요.

사용 가능한 사용자 정의 스타일을 선택한 후 다음 명령을 실행합니다.

$ rails -v
Rails 8.0.0

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

위 명령으로 HTML 요소를 적용할 수 없는 경우 먼저 이전 파일을 지운 다음 다시 사전 컴파일하세요.

$ cd classless-css-tailwind && code .

이제 스타일이 지정된 HTML이요?

위의 사용자 정의로 Tailwind를 구성하고 Rails 서버를 시작하면 스타일이 지정된 HTML이 표시됩니다.

다크 모드

일부 스타일에는 어두운 모드 옵션이 있습니다. 확인하려면 컴퓨터의 색상 개인화 설정에서 테마를 변경하세요. Windows에서 "앱에 대해 어두운 모드 활성화"를 검색하고 어두운 모드와 밝은 모드 사이를 전환합니다. 운영 체제 설정을 변경한 후 HTML 페이지는 밝은 모드와 어두운 모드를 지원함을 나타내기 위해 자동으로 변경되어야 합니다.

다음 단계

[x] 원하는 대로 스타일을 구성하세요. [x] CDN을 사용하지 않고 스타일 지정을 위해 프로젝트에서 CSS 파일을 사용합니다. [x] Tailwind를 사용하여 클래스 없는 CSS 프레임워크의 기능을 복사합니다. [-] Rails Live Reload를 사용하여 브라우저에서 프로젝트 변경 사항을 동적으로 업데이트합니다. [-] 프런트 엔드에서 더 많은 시간을 보내고 싶다면 좋아하는 스타일에 대한 사용자 정의 옵션을 확인하세요.

참고자료

• 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

위 내용은 CSS-Zero를 클래스 없는 CSS 프레임워크로 사용하는 Ruby on Rails 빠른 프런트엔드의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!