使用 Tailwind 作为无类 CSS 框架的快速 Ruby on Rails 前端

本文与本系列之前的文章非常相似，但这次我们将使用Tailwind框架作为无类CSS框架。

创建新的Rails应用

• rails serve 命令前的 time 用于显示命令执行的总时间。以下示例耗时47秒。

<code>$ rails -v
Rails 8.0.0

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

Rails 8 基于其“No Build”理念，默认使用Propshaft作为资源管道库和Importmap作为JavaScript库。Importmap不执行任何JavaScript处理。

使用VSCode或您喜欢的编辑器打开项目

<code>$ rails -v
Rails 8.0.0

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

了解Rails默认布局 app/views/layouts/application.html.erb

展开…

- 遵循约定优于配置（CoC）原则，Rails使用`application.html.erb`作为默认布局来渲染所有页面； - Rails 8中的原始文件内容应与以下内容相同或相似：

<code>$ cd classless-css-tailwind && code .</code>

• 标签内包含页面渲染和正常运行的重要结构元素。 用于包含元数据和重要资源，这些资源有助于配置页面的行为（使用JavaScript）、外观（使用CSS）、与其他系统和服务的关联以及安全设置，例如CSRF和CSP保护；
• 页面的主要内容将通过ERB标签在内渲染。此标签作为集成点，用于包含Rails动态渲染的视图内容；

使用pages控制器和html_test_1、html_test_2、html_test_3和html_test_4操作生成测试页面

展开…

```bash $ rails g controller pages html_test_1 html_test_2 html_test_3 html_test_4 create app/controllers/pages_controller.rb route get "pages/html_test_1" get "pages/html_test_2" get "pages/html_test_3" get "pages/html_test_4" invoke erb create app/views/pages create app/views/pages/html_test_1.html.erb create app/views/pages/html_test_2.html.erb create app/views/pages/html_test_3.html.erb create app/views/pages/html_test_4.html.erb invoke helper create app/helpers/pages_helper.rb ```

• 由于在创建控制器和操作时也添加了路由，因此可以通过以下链接访问任何创建的操作：
• localhost:3000/pages/html_test_1
• localhost:3000/pages/html_test_2
• localhost:3000/pages/html_test_3
• localhost:3000/pages/html_test_4

使用VSCode打开config/routes.rb文件

• 在文件末尾添加以下行，将页面根目录定向到之前创建的pages控制器和html_test_1操作。这样，访问您的网站或系统时，首先显示的页面将是pages控制器的html_test_1页面。否则，将显示Rails的默认页面。

    <title></title><meta content="width=device-width,initial-scale=1" name="viewport"></meta><meta content="yes" name="apple-mobile-web-app-capable"></meta><meta content="yes" name="mobile-web-app-capable"></meta><link href="/icon.png" rel="icon" type="image/png"></link><link href="/icon.svg" rel="icon" type="image/svg+xml"></link><link href="/icon.png" rel="apple-touch-icon"></link>

• 如果在创建控制器时传递了--skip-routes参数，则可以忽略为创建的操作添加路由。完整的命令将变为rails g controller pages html_test_1 html_test_2 html_test_3 html_test_4 --skip-routes

显示Rails路由

展开…

使用终端，您可以指定控制器（使用`-c`）来显示路由，例如`pages`控制器：

<code>$ rails -v
Rails 8.0.0

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

或者，您可以使用以下命令显示所有路由：

<code>$ cd classless-css-tailwind && code .</code>

• 您还可以使用地址http://127.0.0.1:3000/rails/info/routes通过浏览器访问路由。请勿忘记使用项目根目录中的bin/dev或标准rails server启动开发服务器。开发服务器会“监听”JavaScript文件和CSS文件的更改，以执行必要的处理以将其提供给用户。
• 为了使这些文件的更改能够立即在浏览器中执行和查看，需要安装像Rails Live Reload这样的gem。

我们将创建四个包含HTML内容的页面来测试CSS样式。

Ruby on Rails默认使用MVC（模型-视图-控制器）架构来启动项目的组织。大部分代码都组织在以下文件夹中：

• 与领域/业务逻辑和数据相关的代码应保存在app/models文件夹中；
• 与显示相关的代码（HTML、JSON、XML等）将位于app/views文件夹中；
• 与请求生命周期相关的代码将位于app/controllers文件夹中；

插入html_test_1页面的内容

展开…

- 访问链接https://github.com/dbohdan/classless-css/blob/master/screenshot-page.html并复制`

`标签内的所有内容，如下所示

<code>$ rails -v
Rails 8.0.0

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

插入html_test_2页面的内容

展开…

- 访问链接https://gist.github.com/tommaitland/5865229并复制`

`标签内的所有内容，如下所示

<code>$ cd classless-css-tailwind && code .</code>

A Sample Form Legend

Name: Email: Button: Single Checkbox:

Group of Checkboxes:

Checkbox 1: Checkbox 2: Checkbox 3: Checkbox 4:

Color: Date: Date, Time (Local): File: Image: Month: Number: Password: Single Radio:

Group of Radios:

Radio 1: Radio 2: Radio 3: Radio 4:

Range: Reset: Time: Search: Tel: Text: URL: Week: This is a button! Select 1: TestTestSelect 2: TestTestSelect Multiple: TestTestSelect Groups: TestTest TestTest TestTest

Datalist:

插入html_test_3页面的内容

展开…

访问链接https://github.com/cbracco/html5-test-page/blob/master/index.html并复制`

`标签后的所有内容，其中包含文本`

`

    <title></title><meta content="width=device-width,initial-scale=1" name="viewport"></meta><meta content="yes" name="apple-mobile-web-app-capable"></meta><meta content="yes" name="mobile-web-app-capable"></meta><link href="/icon.png" rel="icon" type="image/png"></link><link href="/icon.svg" rel="icon" type="image/svg+xml"></link><link href="/icon.png" rel="apple-touch-icon"></link>

以上是使用 Tailwind 作为无类 CSS 框架的快速 Ruby on Rails 前端的详细内容。更多信息请关注PHP中文网其他相关文章！