Breaking News: Grepper is joining You.com. Read the official announcement!

screen customization in tailwindcss

Shirshak Kandel answered on November 8, 2022 Popularity 7/10 Helpfulness 9/10

answer screen customization in tailwindcss

screen customization in tailwindcss

Comment

//tailwind.config.js
/** @type {import('tailwindcss').Config} */
// at tailwind.config.js theme.screens put all screen size.
module.exports = {
  content: ['./pages/**/*.{js,ts,jsx,tsx}', './components/**/*.{js,ts,jsx,tsx}', './app/**/*.{js,ts,jsx,tsx}'],
  theme: {
    screens: {
      xs: '320px',
      sm: '375px',
      lsm: '425px',
      md: '768px',
      lg: '1024px',
      xl: '1280px',
      '2xl': '1536px',
    },
    extend: {
      colors: {
        primary: '#fa9900',
        headingColor: '#666666',
        textColor: '#999',
      },
      fontFamily: {
        primary: ['Nunito', 'sans-serif'],
      },
    },
  },
  plugins: [],
};

Popularity 7/10 Helpfulness 9/10 Language typescript

Source: Grepper

Tags: customization screen tailwind-css typescript