I've been struggling to create a responsive sidebar using tailwindcss for quite some time. Currently, it appears like this
It looks fine on a 1920x1080 screen, but not on larger or smaller screens. When I scale it down, the text becomes too cramped and doesn't look good image
I want the sidebar to be hidden when the resolution is small, with a button that opens the sidebar instead. Also, when zoomed in (with ctrl + PLUS), the sidebar shows (zoomed in)
Here is my current HTML code:
... (HTML code removed for brevity) ...And here's my tailwind.config.js file:
const defaultTheme = require("tailwindcss/defaultTheme");
module.exports = {
content: [
"./index.html",
"./src/**/*.{vue,js,ts,jsx,tsx}",
],
theme: {
extend: {
width: {
'256': '30rem',
},
height: {
'128': '61rem',
},
},
screens: {
xs: "1390px",
md: "1040px",
xdd: "1000px",
...defaultTheme.screens,
}
},
plugins: [],
}