Tailwind + Rails 6
Steps to configure tailwindCSS in you rails 6 application
Install Tailwind CSS
Run the following command to add tailwind to the package.json
yarn add tailwindcss
Create Tailwind Configuration
The following command will create a tailwind.config.js file where you could setup the default configuration for TailwindCSS
npx tailwindcss init
The taildwind config file will be empty and should look like
module.exports = {
purge: [],
theme: {
extend: {},
},
variants: {},
plugins: [],
}
Here is an example of my tailwind.config.js
module.exports = {
theme: {
extend: {
colors: {
primary: {
100: "#fef6eb",
200: "#f7c686",
300: "#f4b35d",
400: "#f2aa49",
500: "#f1a035",
600: "#d99030",
700: "#c1802a",
800: "#a97025",
900: "#916020",
},
},
},
},
purge: {
content: ["./app/**/*.html.erb"],
}
};
Adding tailwind to PostCSS config
You will need to add the following line to the postcss.config.js file.
require("tailwindcss"),
here is an example of my postcss.config.js file
module.exports = {
plugins: [
require('postcss-import'),
require('postcss-flexbugs-fixes'),
require("tailwindcss"),
require('postcss-preset-env')({
autoprefixer: {
flexbox: 'no-2009'
},
stage: 3
})
]
}
Import tailwind to your Javascript Pack
You will need to import tailwind via javascript.
create an application.css file in app/javascript/layouts/
I usually keep this in a folder called
layouts, you could choose any other folder that's convenient for you inside theapp/javascriptdirectory
add the following to your application.css file that you have created now
/* tailwind */
@import "tailwindcss/base";
@import "tailwindcss/components";
@import "tailwindcss/utilities";
Import application.css in your app/javascript/packs/application.js file.
(add the following line)
import "../layouts/application.css";
Import Tailwind to your layout
Now that you have added TailwindCSS to your application pack, you will have to import it in application.html.erb to use tailwind globally in your application.
Add the following line to app/views/layouts/application.html.erb in <head>
<%= stylesheet_pack_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
Top comments (3)
Any plans on publishing how to add TailswindCSS v2 on Rails 6?
I just did using this very article, the only thing I needed to do was setting up Autoprefixer 7 instead (as shown here tailwindcss.com/docs/installation#...)
thanks