Modern website with next.js and tailwindcss

part1

next.config.js -> modify the existing webpack rules to use svgr

• loader: '@svgr/webpack' --> to do svg transformation

postcss.config.js --->

• tailwindcss --> styles

• autoprefixer --> any browser prefix

tailwind.config.js --->

// tailwind.config.js
const config={
    content:[],
    theme:{
        screens:{
            sm:'375px',
            md:'760px',
            large:'1200px'
        },
        container:{},
        extend:{}
    },
    plugin:[]
}

• content[]

• theme{}

  • screens:{} --> modify existing screen size

    • sm

    • md

    • lg

  • container:{}

  • extend:{}

    • fontFamily

• plugin[]

---

folder structure

src

• app

  • global.css

  • layout.tsx ---> root / index page

  • page.tsx

• asset

  • icon

  • images

• component

• section

---

code

1. header

   layout.tsx

   1. twMerge(inter.className,calistoga.className, )-->

      to merge dynamic class with static class

   2. inter, Calistoga --> next/font/google

      1.  const inter = Inter({subset: ['latin'], variable: "--font-sans",})
          const calistoga = Inter({subset: ['latin'], variable: "--font-serif", weight:['400']})
         

   3. class

      1. bg-gray-900 --> background Color

      2. text-white --> text color

   4. use of variable in tailwind.config.js

      1. extend --> fontFamily

      2.  // tailwind.config.js
          const config={
              content:[],
              theme:{
                  screens:{
                      sm:'375px',
                      md:'760px',
                      lg:'1200px'
                  },
                  container:{},
                  extend:{
                      fontFamily:{
                          sans: 'var(--font-sans)',
                          serif: 'var(--font-serif)',
                      }
                  }
              },
              plugin:[]
          }