Currently, I am working on creating a side panel with a specific width of 90px for small screens (ranging from 320px to 640px). In order to achieve this, I customized a breakpoint in the tailwind.config.js. However, I encountered an issue where my new breakpoint (320px to 640px) is affecting all screen sizes above 320px. My UI is built using React.
Below is the React code snippet:
import '/src/assets/style/sidepanel.css'
function sidepanel(){
return(
<>
<div className='sidepanel sm:w-1 xs:w-[90px] float-left'>
</div>
</>
);
}
export default sidepanel;
Here is my tailwind.config.js:
/** @type {import('tailwindcss').Config} */
module.exports = {
content: [
"./index.html",
"./src/**/*.{js,ts,jsx,tsx}",
],
theme: {
extend: {
screens: {
xsss:"0px", //0 to 160px
xss: "160px", //160 to 320
xs: "320px", //320 to 640
sm: "640px",
md: "768px",
lg: "1024px",
xl: "1280px",
"smm": "200px",
'height_login': {'raw': '(max-height: 260px)'},
},
},
},
plugins: [
],
}
Additionally, here is my sidepanel.css:
@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@300&display=swap");
@tailwind base;
@tailwind components;
@tailwind utilities;
* {
margin: 0;
padding: 0;
}
.sidepanel{
background-color: rgba(83, 19, 72, 0.85);
height: 100vh;
}
I have tried researching online and even experimenting with Tailwind arbitrary values, but unfortunately, I haven't found a solution yet. Ideally, I want the side panel width to be fixed at 90px only on small screens (320px to 640px), without affecting larger screen widths (above 640px).