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?
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?
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"