Install Tailwind CSS on a Rails Project

This was found in this GoRails guide: https://www.youtube.com/watch?v=L2nyKwrEY8w

Install Tailwind

yarn add tailwindcss

If when running the server tailwind is not working and you see this JS error: Error: PostCSS plugin tailwindcss requires PostCSS 8. it means you will need to run this (according to tailwind docs)

npm uninstall tailwindcss postcss autoprefixer
npm install tailwindcss@npm:@tailwindcss/postcss7-compat @tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9

Create the stylesheets folder and application.scss file

Create this file and folder:

app/javascript/stylesheets/application.css

Drop in the Tailwind styles

From Tailwind docs: https://tailwindcss.com/docs/installation/#2-add-tailwind-to-your-css

@import "tailwindcss/base";
@import "tailwindcss/components";
@import "tailwindcss/utilities";

Require the stylesheet in app/javascripts/packs/application.js

In app/javascripts/packs/application.js add this line:

require("stylesheets/application.css")

Add the stylesheet_pack_tag to the head

This should be present in addition to the stylesheet_link_tag. This will ensure that styles from webpack (inside app/javascript/stylesheets) get compiled and included.

<%= stylesheet_pack_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>

Update postcss.config.js

Found in Tailwind docs here: https://tailwindcss.com/docs/installation/#using-tailwind-with-postcss

Add this line below require('postcss-import')

If it is not below postcss-import, then @apply rules won't work in the CSS files.

require('tailwindcss'),

Generate the Tailwind config file

From Tailwind docs: https://tailwindcss.com/docs/installation/#3-create-your-tailwind-config-file-optional

This will create the empty tailwind.config.js file in the project root. This is where you will place configs to override Tailwind's defaults.

npx tailwind init

Create a full version of the Tailwind config so you can reference it

This will be used to reference and copy/paste settings that you want to override inside tailwind.config.js.

npx tailwind init tailwind-full.config.js --full

To override any config settings, place those overrides inside the theme: { ... } section in tailwind.config.js

Add my custom utilities CSS

Create another file at app/javascript/stylesheets/global/custom-utilities.scss

Reference this file in application.scss, in between tailwindcss/base and tailwindcss/components:

@import "global/custom-utilities.scss";

These are my common custom utilities to include in custom-utilities.scss:

.top-1 { top: 1px; }
.top-2 { top: 2px; }
.top-3 { top: 3px; }
.top-4 { top: 4px; }
.top-5 { top: 5px; }
.top-6 { top: 6px; }
.top-7 { top: 7px; }
.top-8 { top: 8px; }
.top-9 { top: 9px; }
.top-10 { top: 10px; }
.top-11 { top: 11px; }
.top-12 { top: 12px; }
.top-13 { top: 13px; }
.top-14 { top: 14px; }
.top-15 { top: 15px; }
.bottom-1 { bottom: 1px; }
.bottom-2 { bottom: 2px; }
.bottom-3 { bottom: 3px; }
.bottom-4 { bottom: 4px; }
.bottom-5 { bottom: 5px; }
.bottom-6 { bottom: 6px; }
.bottom-7 { bottom: 7px; }
.bottom-8 { bottom: 8px; }
.bottom-9 { bottom: 9px; }
.bottom-10 { bottom: 10px; }
.bottom-11 { bottom: 11px; }
.bottom-12 { bottom: 12px; }
.bottom-13 { bottom: 13px; }
.bottom-14 { bottom: 14px; }
.bottom-15 { bottom: 15px; }
.left-1 { left: 1px; }
.left-2 { left: 2px; }
.left-3 { left: 3px; }
.left-4 { left: 4px; }
.left-5 { left: 5px; }
.left-6 { left: 6px; }
.left-7 { left: 7px; }
.left-8 { left: 8px; }
.left-9 { left: 9px; }
.left-10 { left: 10px; }
.left-11 { left: 11px; }
.left-12 { left: 12px; }
.left-13 { left: 13px; }
.left-14 { left: 14px; }
.left-15 { left: 15px; }
.right-1 { right: 1px; }
.right-2 { right: 2px; }
.right-3 { right: 3px; }
.right-4 { right: 4px; }
.right-5 { right: 5px; }
.right-6 { right: 6px; }
.right-7 { right: 7px; }
.right-8 { right: 8px; }
.right-9 { right: 9px; }
.right-10 { right: 10px; }
.right-11 { right: 11px; }
.right-12 { right: 12px; }
.right-13 { right: 13px; }
.right-14 { right: 14px; }
.right-15 { right: 15px; }