# Install Tailwind CSS on a Rails Project

This was found in this GoRails guide:\
[https://www.youtube.com/watch?v=L2nyKwrEY8w](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](https://tailwindcss.com/docs/installation#post-css-7-compatibility-build))

```
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](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](https://tailwindcss.com/docs/installation/#using-tailwind-with-postcss)

Add this line below `require('postcss-import')`&#x20;

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](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`&#x20;

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; }
```

