This content originally appeared on DEV Community and was authored by Marc
Originally posted on my blog: https://webdevchallenges.com/add-tailwind-to-rails
How to add Tailwind to Rails 6.1
New Rails Project
rails new myproject
cd myproject
Install dependencies
yarn add tailwindcss@npm:@tailwindcss/postcss7-compat postcss@7 autoprefixer@9
Generate tailwind config
npx tailwindcss init --full
Add purge paths to the newly generated file (tailwind.config.js) to reduce the css file dramatically.
purge: [
"./app/**/*.html.erb",
"./app/helpers/**/*.rb",
"./app/javascript/**/*.js",
"./app/javascript/**/*.vue",
],
Create a scss file for the application
mkdir app/javascript/stylesheets
touch app/javascript/stylesheets/application.scss
Import some basic tailwind stuff in there
@import "tailwindcss/base";
@import "tailwindcss/components";
@import "tailwindcss/utilities";
Import that file in app/javascript/packs/application.js
import "stylesheets/application";
Require tailwindcss in postcss
Add the following require to the postcss.config.js file
require('tailwindcss'),
Import the tailwind stylesheet pack
Import the stylesheet_pack_tag in your layouts (app/views/layouts/application.html.erb)
<%= stylesheet_pack_tag 'application', media: 'all' %>
Try it out
Uun the rails server in one terminal
rails s
And the webpack dev server in another one
./bin/webpack-dev-server
This content originally appeared on DEV Community and was authored by Marc
Marc | Sciencx (2021-05-30T14:40:13+00:00) Add Tailwind 2 to Rails 6.1. Retrieved from https://www.scien.cx/2021/05/30/add-tailwind-2-to-rails-6-1/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.