通过Webpacker的Rails 6和Tailwind CSS —入门

最近,我开始开发一个新的Rails应用程序,并选择了第6版(尽管仍处于beta版)。 做出此决定的主要驱动力之一是ActiveStorage :: Blob#open的可用性,但这是另一篇文章。

老实说,这不是一个全新的应用程序,而是尝试重写我三年前在Rails应用程序上的第一次沉闷尝试,这次是尝试遵循Rails Way。

由于该项目将使用服务器端呈现的视图,并且需要快速开发而几乎没有UI / UX指导,因此我认为从Adam Wathan和Steve Schoger的书《重构UI》中做一些笔记不会有任何危害。 这是一本为开发人员写的方便的书,他们“知道某些东西看起来很糟糕,却不知道为什么”。

除此之外,Tailwind CSS v1.0 beta的到来。 我一直在关注其去年的发展,并考虑到前面提到的Adam和Steve参与了Tailwind的发展,因此可以毫不费力地将它作为样式设计的理想选择。

Tailwind CSS –一种实用程序优先的CSS框架,用于快速构建自定义用户界面。

足够的玩笑让我们开始吧。

创建一个新的Rails 6应用

需要Rails6。您可以使用以下命令进行安装。

git clone https://github.com/rails/rails.git 
cd rails
bundle install

在终端运行

 rails new my_tails_app -d postgresql 

如果这是您第一次使用Webpacker创建应用,那么当节点似乎将大部分Internet下载到`node-moules /`中时,请不要感到惊讶。
这是预料之中的。

进入应用目录

 cd my_tails_app 

安装尾风

 yarn add tailwindcss --dev 

创建app/javascript/css目录

 mkdir app/javascript/css 

生成Tailwind配置文件

 yarn tailwind init app/javascript/css/tailwind.js 

创建application.css文件

 touch app/javascript/css/application.css 

将以下内容粘贴到app/javascript/css/application.css

  / ** 
*这注入了Tailwind的基本样式,这是
* Normalize.css和一些其他基本样式。
*
*您可以在此处查看样式:
* https://github.com/tailwindcss/tailwindcss/blob/master/css/preflight.css
*
*如果使用`postcss-import`,请改为使用以下导入:
*
* @import“ tailwindcss / preflight”;
* /
@tailwind飞行前;

/ **
*这将注入插件注册的所有组件类。
*
*如果使用`postcss-import`,请改为使用以下导入:
*
* @import“ tailwindcss / components”;
* /
@tailwind组件;

/ **
*在这里您将添加任何自定义组件类; 你想要的东西
*要在实用程序之前加载*,以便实用程序仍然可以
*覆盖它们。
*
*示例:
*
* .btn {...}
* .form-input {...}
*
*或者使用预处理器或`postcss-import`:
*
* @import“组件/按钮”;
* @import“组件/表单”;
* /

/ **
*这将注入所有Tailwind的实用程序类,这些类基于您的
*配置文件。
*
*如果使用`postcss-import`,请改为使用以下导入:
*
* @import“ tailwindcss /实用程序”;
* /
@tailwind实用程序;

/ **
*在这里,您将添加不需要的任何自定义实用程序
*带有Tailwind的盒子。
*
*示例:
*
* .bg-pattern-graph-paper {...}
* .skew-45 {...}
*
*或者使用预处理器或`postcss-import`:
*
* @import“实用程序/背景图案”;
* @import“实用程序/偏斜变换”;
* /

将`stylesheet_pack_tag`添加到`app / views / layouts / application.html.erb`

  #将其添加到javascript_pack_tag之后 

将以下内容添加到“ app / javascript / packs / application.js”

  导入 “ ../css/application.css” 

postcss.config.js添加到在应用程序根目录中找到的postcss.config.js文件中。

 require('tailwindcss')('./app/javascript/css/tailwind.js'), 
require('autoprefixer'),

postcss.config.js文件应如下所示。

  module.exports = { 
插件:[
require('postcss-import'),
require('postcss-flexbugs-fixes'),
require('tailwindcss')('./ app / javascript / css / tailwind.js'),
require('autoprefixer'),
require('postcss-preset-env')({
自动前缀:{
flexbox:'no-2009'
},
阶段:3
})
]
};

生成一个主页以检查设置。

 rails g controller home index 

将根路径添加到config/routes.rb

 root 'home#index' 

在启动Rails Server之前,让我们创建数据库。

 rails db:create 

启动Rails服务器

 rails s 

在浏览器中转到http:// localhost:3000

让我们通过将app/views/home/index.html.erb的内容替换为Tailwind安装来进行测试

  


”“


亚当·沃森


NothingWorks Inc.的开发人员。








而已。 请阅读Tailwind文档,以了解有关此超棒CSS框架的更多信息,并根据自己的喜好对应用程序进行样式设置。

我在这里添加了Rails 6&Tailwind回购以及其他一些功能。