CSS

tailwind.config.js

//global.css
@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@300;400;500;600;700;800&display=swap');
@tailwind base;
@tailwind components;
@tailwind utilities;


/** @type {import('tailwindcss').Config} */
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: [],
};

generate your tailwind.config.js file

npx tailwindcss-cli@latest init

Tailwind Config File

module.exports = {
  content: ['./dist/*.html'],
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [],
}