Tailwind UI, Tailwind CSS, AlpineJS & Inter Typeface for Ruby on Rails. — Part 1

UPDATE: See here for the updated post on how to setup Rails 6.1, TailwindCSS JIT, Webpacker & PostCSS 8

Production ready comic from monkeyuser.com

Installation & Setup

rails new tails_on_rails -d postgresql

Edit: With the new version 6.1 of Rails and the new TailwindCSS 2.0 these steps are no longer valid.

yarn add tailwindcss
yarn add @tailwindcss/ui
yarn add alpinejs

Configuration

npx tailwindcss init
require('tailwindcss'),
require('autoprefixer'),
module.exports = {
plugins: [
require('postcss-import'),
require('tailwindcss'),
require('autoprefixer'),
require('postcss-flexbugs-fixes'),
require('postcss-preset-env')({
autoprefixer: {
flexbox: 'no-2009'
},
stage: 3
})
]
}
@import "tailwindcss/base";@import "tailwindcss/components";@import "tailwindcss/utilities";
require("alpinejs")
import '../stylesheets/application.scss'
require("@rails/ujs").start()
require("turbolinks").start()
require("@rails/activestorage").start()
require("channels")
require("alpinejs")
import '../stylesheets/application.scss'

Add the Inter typeface — optional

<link href="https://fonts.googleapis.com/css?family=Inter&display=swap" rel="stylesheet">
const defaultTheme = require('tailwindcss/defaultTheme')module.exports = {
theme: {
extend: {
fontFamily: {
sans: ['Inter', ...defaultTheme.fontFamily.sans],
},
},
},
plugins: [
require('@tailwindcss/ui'),
]
}

Verify the setup in Rails

rails db:create
config.generators.assets = false
config.generators.helper = false
rails generate controller Home index
root "home#index"
rails server
bin/webpack-dev-server
 http://localhost:3000
echo $(curl https://gist.githubusercontent.com/davidteren/c69acb6179df5ee930e0304297d21440/raw/94cecb96100ff502decb2834c0ac49dc78ecca28/index.html.erb) > app/views/home/index.html.erb
Desktop view
Responsive view

UPDATE: See here for the updated post on how to setup Rails 6.1, TailwindCSS JIT, Webpacker & PostCSS 8

Resources

--

--

--

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

Four Ways to Compose Synchronous Functions in JavaScript

Dynamically Render 10,000+ Custom Markers on a Google Map With React.js

Using Styled Components with React Native

3 Ways to Write Elegant JavaScript Code

Setting up Sentry in RedwoodJS

[SOLVED] Fatal error: Class ‘Illuminate\Foundation\Application’ not found in…

Build and Deploy Serverless Application with webpack

Set background image in ReactJs

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

Ghostd: Discovering Backend Development with a Dating App for Dead People

Generate Cryptographic Hashes in your Browser Side Javascript

The Mystery of the Changing Favicon

Create a warm world