- Add tailwindcss-rails gem to Gemfile - Create application.tailwind.css for Tailwind styles - Update Procfile.dev for Tailwind CSS watch command - Add demo action and view for showcasing features - Update application layout to use Tailwind CSS classes - Refactor footer and header for improved styling This commit introduces Tailwind CSS for styling the application, enhancing the UI with utility-first CSS. A new demo page is also added to showcase the application features.
39 lines
1.2 KiB
Plaintext
39 lines
1.2 KiB
Plaintext
<footer class="mt-12 pt-5 border-t border-gray-200 text-gray-600">
|
|
<div class="container mx-auto px-4">
|
|
<div class="flex flex-col md:flex-row md:justify-between items-center">
|
|
<!-- 左侧文本 -->
|
|
<small class="text-sm mb-4 md:mb-0">
|
|
The
|
|
<a href="https://www.railstutorial.org"
|
|
class="text-gray-600 hover:text-gray-900">
|
|
Ruby on Rails Tutorial
|
|
</a>
|
|
by
|
|
<a href="https://www.michaelhartl.com"
|
|
class="text-gray-600 hover:text-gray-900">
|
|
Michael Hartl
|
|
</a>
|
|
</small>
|
|
|
|
<!-- 右侧导航 -->
|
|
<nav>
|
|
<ul class="flex flex-wrap justify-center space-x-4">
|
|
<li>
|
|
<%= link_to "About", about_url,
|
|
class: "text-gray-600 hover:text-gray-900" %>
|
|
</li>
|
|
<li>
|
|
<%= link_to "Contact", contact_url,
|
|
class: "text-gray-600 hover:text-gray-900" %>
|
|
</li>
|
|
<li>
|
|
<a href="https://news.railstutorial.org"
|
|
class="text-gray-600 hover:text-gray-900">
|
|
News
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
</nav>
|
|
</div>
|
|
</div>
|
|
</footer> |