Skip to main content

Theme Customization

For customizing the template's default site settings:

find more for tailwind customization https://tailwindcss.com/docs/configuration

info

Avoid using custom css insted customize theme from tailwind.config and use tailwind classes only.

By Default default tailwind values will be used for theming. extend the values as per requirements

1. Typography​

Add Font-Family​

Goto global.scss

File Path:

.
└── RealEstatePro/
    ├── ...
    ├── styles/
    │   └── global.scss
    └── ...

Add Google Fonts Directly by

@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@100;300;400;500;600&display=swap");

Or

Add Custom Font:

@font-face {
    font-family: 'font-name';
    src: url('/[filepath]/.eot');
    src: url('/[filepath]/.eot?#iefix') format('embedded-opentype'),
         url('/[filepath]/.woff2') format('woff2'),
         url('/[filepath]/.woff') format('woff'),
         url('/[filepath]/.ttf') format('truetype'),
         url('/[filepath]/.svg#font-name') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

Customize color, size etc.​

Goto Tailwind.config file

File Path:

.
└── RealEstatePro/
    ├── ...
    ├── tailwind.config.js
    └── ...

Extend typography from tailwind.config

Demo:

module.exports = {
  mode: 'jit',
  content: [
    "./pages/**/*.{js,jsx,ts,tsx}",
    "./Components/**/*.{js,jsx,ts,tsx}"
  ],
  theme: {
    extend: {
      letterSpacing:{
        'widest': '1em',
      },
      colors: {
        'primary': 'rgb(var(--primary-color))',
        ...
        'grey': {
          '100': '#d3d3d3',
          '200': '#e5e2e2'
        },
        'transparentLight': {
          '100': 'rgba(255,255,255,.1)',
          ...
        },
        'transparentDark': {
          '50': 'rgba(0,0,0,.05)',
          '100': 'rgba(0,0,0,.1)',
          ...
        },
        'transparentPrimary': {
          '150': 'rgba(var(--primary-color)/.05)',
          ...
        }
      },
      fontFamily: {
        'titleFont': ['Rubik', 'sans-serif'],
        ...
      },
      fontSize: {
        'xxs': '.6rem'
      },
      letterSpacing: {
        'subTitle': '.25rem'
      }
    },
  },
}

info

for more customization visit tailwind docs.

Goto Tailwind.config file

File Path:

.
└── RealEstatePro/
    ├── ...
    ├── tailwind.config.js
    └── ...
module.exports = {
  theme: {
    extend: {
      colors: {
        'primary': 'rgb(var(--primary-color))', // primary color
        'primary-light': 'rgba(var(--primary-color)/.1)', // lighter version of primary i.e. button background
        'secoundary': 'var(--secondary-color)', // subtitle color
        'dark':'var(--color-dark)',
        'light': 'var(--color-light)',
        'grey': {
          '100': '#d3d3d3',
          '200': '#e5e2e2'
        },
      }
    }
  }
}
info

css variables defined at styles > global.scss

3. Container Configuration​

Change classes in .container {...} as per requirement.

File Path:

└── RealEstatePro/
    ├── ...
    ├── styles/
    │   └── global.scss
    └── ...

4. Breakpoints​

Tailwind Provides Default breakpoints for responsive styling

you can override default breakpoints as per requirement.

For more info visit: https://tailwindcss.com/docs/responsive-design

default values:

sm  640px   @media (min-width: 640px) { ... }
md  768px   @media (min-width: 768px) { ... }
lg  1024px  @media (min-width: 1024px) { ... }
xl  1280px  @media (min-width: 1280px) { ... }
2xl 1536px  @media (min-width: 1536px) { ... }