- Install Tailwind CSS Install the tailwindcss-rails gem, and then run the install command to generate a tailwind.config.js file in the ./config directory.
./bin/bundle add tailwindcss-rails
./bin/rails tailwindcss:install
- Configure your template paths Add the paths to all of your template files in your tailwind.config.js file. Plugins can be added using npm install @@tailwindcss/[plugin-name] and added to other required plugin names.
const defaultTheme = require('tailwindcss/defaultTheme')
module.exports = {
content: [
'./public/*.html',
'./app/helpers/**/*.rb',
'./app/javascript/**/*.js',
'./app/views/**/*.{erb,haml,html,slim}'
],
theme: {
extend: {
fontFamily: {
sans: ['Inter var', ...defaultTheme.fontFamily.sans],
},
},
},
plugins: [
require('@tailwindcss/forms'),
require('@tailwindcss/aspect-ratio'),
require('@tailwindcss/typography'),
require('@tailwindcss/container-queries'),
]
}
3.Add the Tailwind directives to your CSS Add the @tailwind directives for each of Tailwind’s layers to your application.tailwind.css file located in the ./app/assets/stylesheets directory.
@tailwind base;
@tailwind components;
@tailwind utilities;
4.Start your build process Run your build process with ./bin/dev in your Terminal.
./bin/dev.
4.Start using Tailwind in your project Start using Tailwind’s utility classes to style your content. Add this class to an h1 tag to test.
class="text-3xl font-bold underline"
wixenco.com
My new venture plug