Question 323013 in CSS Question posted in
Some basic documentation can be found here.

Css – tailwind breakpoints affecting to all the widths

I making a side panel and i want its width to be 90px on small screens (320px to 640px).To do this i made a custom break point on the tailwind.config.js. So the problem in here is that my newly made break point (320px to 640px) is affecting on all screen width size above 320px. I am using react to build the ui.

Here is my react code

import '/src/assets/style/sidepanel.css'
function sidepanel(){
    return(
        <>
            <div className='sidepanel sm:w-1 xs:w-[90px] float-left'>

            </div>
        </>
    );
}
export default sidepanel;

this 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: [
    
  ],
}

this 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 googled about this but i didnt got anything. I used tailwind arbitary values but still it didnt work out for me. I am expecting the the sidepanel width to be 90 px on small screens (320px to 640px) ie only on the applied breakpoint. I dont want the width to be 90px on large screen width ie (above 640px)

Tags:

3

Answers


  1. 0

    TailwindCSS is mobile first.

    You have to think in the following way:
    0px – 320px —> your smaller screen value
    320px-640px —> w-[90px]
    640px+ —> your bigger screen value

    So if you want to apply to TailwindCSS classes this logic, it would be someting like this:

    "w-[smaller screen value] xs:w-[90px] sm:[bigger screen value]".

    Login or Signup to reply.
  2. 0

    The xs:w-[90px] class affects all screens with a size greater than or equal to 320px. Actually, it works as : @media (min-width: 320px) { width:90px }.

    There are 2 solutions to implement your idea:

    1)For screens larger than 640px, consider another style, for example: ‘xs:w-[90x] sm:w-[140px]’

    2)you can modify your tailwind.config.js as :

    module.exports = {
  theme: {
    screens: {
      'xsss': {'min': '0', 'max': '160px'},
      // => @media (min-width: 640px and max-width: 767px) { ... }

      'xss': {'min': '161', 'max': '320px'},
      // => @media (min-width: 640px and max-width: 767px) { ... }

      'xs': {'min': '321', 'max': '640px'},
      // => @media (min-width: 640px and max-width: 767px) { ... }

      'sm': {'min': '641px', 'max': '767px'},
      // => @media (min-width: 640px and max-width: 767px) { ... }

      'md': {'min': '768px', 'max': '1023px'},
      // => @media (min-width: 768px and max-width: 1023px) { ... }

      'lg': {'min': '1024px', 'max': '1279px'},
      // => @media (min-width: 1024px and max-width: 1279px) { ... }

      'xl': {'min': '1280px', 'max': '1535px'},
      // => @media (min-width: 1280px and max-width: 1535px) { ... }

      '2xl': {'min': '1536px'},
      // => @media (min-width: 1536px) { ... }
    },
  }
}

    so if use ‘xs:w-[90px]’ ,it is applied only on screens with a size larger than 320px and smaller equal to 640px

    Login or Signup to reply.
  3. 0

    Tailwind generates max-* rules for this use-case : see doc. In your case, you could use max-xs:w-[90px].

    However, it might be better (and closer to Tailwind’s intent) to use xs:w-[90px] sm:w-[smth]

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search