TailwindCSS 2.0 with Rails 6.1

rails new <app_name> -d postgresql --skip-spring
cd <app_name>
yarn remove @rails/webpacker
yarn add rails/webpacker#b6c2180
gem 'webpacker', '~> 5.0'
gem "webpacker", github: "rails/webpacker", ref: 'b6c2180'
bundle
yarn add tailwindcss postcss autoprefixer @tailwindcss/forms @tailwindcss/typography @tailwindcss/aspect-ratio
mkdir app/javascript/stylesheets && touch app/javascript/stylesheets/application.scss
@import "tailwindcss/base";@import "tailwindcss/components";@import "tailwindcss/utilities";
require("stylesheets/application.scss")
require('tailwindcss'),
<%= stylesheet_pack_tag 'application', 'data-turbolinks-track': 'reload' %><link rel="stylesheet" href="https://rsms.me/inter/inter.css"
npx tailwindcss init --full
require('@tailwindcss/forms'),
require('@tailwindcss/typography'),
require('@tailwindcss/aspect-ratio'),
'Inter var',
rails g controller Home index
<div class="font-sans bg-white h-screen flex flex-col w-full">
<div class="h-screen bg-gradient-to-r from-green-400 to-blue-500">
<div class="px-4 py-48">
<div class="relative w-full text-center">
<h1
class="animate-pulse font-bold text-gray-200 text-2xl mb-6">
Your TailwindCSS setup is working if this pulses...
</h1>
</div>
</div>
</div>
</div>
root 'home#index'
bin/webpack-dev-server
rails db:create db:migrate
rails s

--

--

--

Former Audio Engineer, Sound Designer & Music Producer turned Software Developer.

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

CSS flexbox

knex gotcha: adding .then to execute insertion

How I learned React-Native: From 0 to 1

Using Data Provider Pattern for JavaScript Unit Tests

Javascript unit test displayed inside VSCode

How to Create a Fullstack App Using NuxtJS, NestJS, and Datastax Astra DB (with a Little Help from…

Node Js Tracing

Recursion Revealed

Get all child elements of a parent element [Selenium]

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
David Teren

David Teren

Former Audio Engineer, Sound Designer & Music Producer turned Software Developer.

More from Medium

How to Use Drag And Drop On HTML5 Canvas Element Using FabricJS

Formatting Form Inputs in React to use accepts_nested_attributes_for in Rails

How to easily configure and integrate Bootstrap, jquery, tailwind, and many more to Rails.

Set up Rails 7 with GraphQL, Apollo Client, and React