Tailwind CSSの習作: Rails scaffold.scssの移植

application.js

// This file is automatically compiled by Webpack, along with any other files
// present in this directory. You're encouraged to place your actual application logic in
// a relevant structure within app/javascript and only use these pack files to reference
// that code so it'll be compiled.

require("@rails/ujs").start()
require("turbolinks").start()
require("@rails/activestorage").start()
require("channels")
require("./application.scss")


// Uncomment to copy all static images under ../images to the output folder and reference
// them with the image_pack_tag helper in views (e.g <%= image_pack_tag 'rails.png' %>)
// or the `imagePath` JavaScript helper below.
//
// const images = require.context('../images', true)
// const imagePath = (name) => images(name, true)

application.scss

@tailwind base;

@tailwind components;

@import "scaffold.scss";

@tailwind utilities;

scaffold.scss

body { @apply bg-white text-gray-800 m-8; }
pre { @apply bg-gray-200 p-3 text-sm; }
a { @apply text-black; }
a:visited { @apply text-gray-600; }
a:hover { @apply text-white bg-black; }
th { @apply pb-1; }
td { @apply pt-0 px-1 pb-2; }
div.field,
div.actions { @apply mb-3; }

#notice { @apply my-4 text-green-700; }

.field_with_errors > label { @apply underline font-bold text-red-700; }
#error_explanation h2 { @apply mt-4 bg-red-600 text-white font-bold rounded-t px-4 py-2; }
#error_explanation ul { @apply mb-4 border border-t-0 border-red-400 rounded-b bg-red-100 px-4 py-3 text-red-700; }

label { @apply block; }

h1 { @apply text-3xl; }
h2 { @apply text-xl; }
h3 { @apply text-lg; }

.input { @apply shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight; }
.input:focus { @apply outline-none shadow-outline; }

.btn { @apply py-2 px-4 rounded; }
.btn:hover { @apply cursor-pointer; }
.btn.disabled { @apply opacity-50 cursor-not-allowed; }
.btn.blue { @apply bg-blue-500 text-white; }
.btn.blue-outline { @apply bg-transparent text-blue-700 py-2 px-4 border border-blue-500; }