Starting A Project With Kickoff_Tailwind And Tailwind 2+

In this article, I am going to start a new project using a template created by Andy Leverenz. If you're not familiar with Andy's work, check out web-crunch.com and hellorails.io.

Please note you will need to make an adjustment inside the Kickoff Tailwind template since the release of Tailwind 2.0.

The template is called Kickoff_Tailwind and if you have seen Jumpstart Rails from GoRails, then you will know exactly what this is. But this is free template, for personal use, which starts a project with the type of defaults you will want on most projects - such as gems like devise, friendly_id, sidekiq, and name_of_person. But the other piece to this template is mentioned in the name... it starts with Tailwind CSS by default, which is why I love this.

So, let's get started.

The easiest way to to get the template folder into your system is to use the GitHub command line interface to clone the repo where you desire to have it on your machine.

If you are using Homebrew on your Mac and you don't have the GitHub CLI, simply install it:

$ brew install gh

Now, let's get the the template which can be found here: https://github.com/justalever/kickoff_tailwind.

I keep all my work in a folder called "code" that is in my home directory, so that's where I will bring this in.

$ cd code
code $ gh repo clone justalever/kickoff_tailwind

Then you should have kickoff_tailwind folder inside the directory.
Note: you may have an issue where you need to authenticate to GitHub first. If so, follow the directions in your terminal and you will soon be ready to re-run the repo command.

Once you have the directory on your machine, you will need to go into the directory and edit the template.rb file.

Look for line 47 which states:

run "yard add tailwindcss"

and change it to:

run "yarn add [email protected]:@tailwindcss/postcss7-compat"

You have to make the change because Tailwind CSS 2.0 now uses PostCSS 8 and Rails and it's Webpacker configuration are not yet compatible. The good news is the compatible version of Tailwind is identical and you will lose no functionality. 

There's a few more changes you will need to make coming below, because of the new Tailwind version.

The next thing you will need to do is to move into the kickoff_tailwind directory.

code $ cd kickoff_tailwind

Now, let's start a project using the template.

kickoff_tailwind $ rails new <myappname> --database=postgresql -m template.rb

You don't have to use postgres as the database, in fact, you can choose which one you want such as mysql or even sqlite3. I happen to like to postgres and have it installed on my system.

After running the command, it will take some time to complete. So be patient. If you do get errors, you will need to fix those.

Now, you have to make that additional change for Tailwind 2.0+ to work.

Because of Tailwind's new color declarations, you need to get a new Tailwind config file installed.

First get into your app folder in the terminal:

kickoff_tailwind $ cd myapp

Then go to your stylesheets directory in your app/javascript folder through your file browser or do it in the terminal like this:

myapp $ cd app/javascript/stylesheets

Then remove the current Tailwind configuration file:

stylesheets $ rm -rf tailwind.config.js

Now reinitialize a new config file which will contain what is needed to run the latest version of Tailwind:

stylesjeets $ npx tailwindcss init --full

You should see something like this:

Adding new Tailwind config.


But, we're still not done. We have to edit that config file to include some color declarations that are in use by the template's components that are not defined by default in the new Tailwind. If you don't do this, Tailwind will not work.

So open the tailwind.config.js file in your editor. In case you wanted to see it an editor, here's where it is:

File directory with Tailwind config.


Then, the new file looks like this at the top. You'll notice the constant color variable which makes the entire new color palette in Tailwind 2.0 available. But below, you will see the "colors" setting where you have to define which color in the CSS maps to in the color palette.

New Tailwind config file.


In the colors you need to add a few lines to the bottom of the defined colors, since Andy uses these in the template but are not defined in the new default Tailwind config. If you want to see all the new color palettes available in Tailwind 2+, check them out here.

orange: colors.orange,
teal: colors.teal,

After you add these, it should look like this:

Defining Tailwind color maps


Now that you have your new site with the template, you can enter into that directory and boot up the server.

kickoff_tailwind $ cd myapp
myapp $ rails server

And that's it... you should be good to go!




0 Comments


Please log in to leave a reply.