Make sure that you have node 12.13 or higher:
If not, then upgrade node.
Inside of your rails project, install
tailwind. We need to use the
PostCSS 7 compatibility build at this time since not all of our
plugins are updated.
Then we create a directory
have tailwind use. Create a file
components. If you need to extract and apply different components you
can do it here.
Finally, we need to add
tailwindcss to the
postcss pipeline. In
First we need to tell
new sass sheet:
And then add the
stylesheet_pack_tag to your layout
And then update the
body style with a little tailwind goodness, so we can test it out:
Which we can do by creating a simple route:
config/routes.rb add a
Setting up production purging
We're going to follow tailwind purgecss directions and create a
Add in any additional filetypes depending upon which templating system you are using.
Customizing the theme
Tailwind has a lot of ways to change the theme, but lets walk through how to add a different font for the site.
First we'll add a font via npm, from the fontsource project.
Then, we need to tell webpacker to include it, which is driven off of
Then we are need to tell
tailwind to use this new font. First we import the default theme, and then we'll add our new
fontFamily to the front:
Note that rails is only checking to see if the
application.js file has
changed inside of the
app/assets folder, so if you make a change to
tailwind.config.js file you need to touch
trigger a rebuild.