使用 Tailwind 作为无类 CSS 框架的快速 Ruby on Rails 前端-css教程-PHP中文网

创建新的Rails应用

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

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

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

显示Rails路由

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

插入html_test_3页面的内容

首页

web前端

css教程

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

Mary-Kate Olsen

Jan 15, 2025 am 10:44 AM

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

本文与本系列之前的文章非常相似，但这次我们将使用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>

登录后复制

<head> 标签内包含页面渲染和正常运行的重要结构元素。<head> 用于包含元数据和重要资源，这些资源有助于配置页面的行为（使用JavaScript）、外观（使用CSS）、与其他系统和服务的关联以及安全设置，例如CSRF和CSP保护；
页面的主要内容将通过ERB标签在<body>内渲染。此标签作为集成点，用于包含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并复制`

插入`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中文网其他相关文章！

本站声明

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn