Ask A Question

Notifications

You’re not receiving notifications from this thread.

Using tailwind css in my rails app, patterned after your blog tutorial. How do I get rid of all the whitespace on each side of the page, I want to use the whole screen?

Mike Cannon asked in CSS

So I have modified by tailwind.config.js file as such:
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],
},
// Here's where we're adding custom prose styles
prose: {
'max-w-none': {
maxWidth: 'none',
},
'p-0': {
padding: '0',
},
'px-0': {
paddingLeft: '0',
paddingRight: '0',
},
'py-0': {
paddingTop: '0',
paddingBottom: '0',
},
// If you want to remove margins
'm-0': {
margin: '0',
},
},
},
},
plugins: [
require('@tailwindcss/forms'),
require('@tailwindcss/typography'),
require('@tailwindcss/container-queries'),
]
}

Also have changed my application.html.erb file to this:
But nothing seems to change on the screen. I've verified that tailwind is loading and I can see the styles I have created when I inspect the page. Any recommendations on how to expand to use the full screen instead of this centered squished look with all the whitespace on the left and right side of the page?

Reply

The application.html.erb change didn't post in my original question - here it is
body class="prose prose-p-0 prose-max-w-none mx-auto"

Reply
Join the discussion
Create an account Log in

Want to stay up-to-date with Ruby on Rails?

Join 86,796+ developers who get early access to new tutorials, screencasts, articles, and more.

    We care about the protection of your data. Read our Privacy Policy.