Tailwind CSS Full Course 2023 | Build and Deploy a Nike Website

.eslintrc.cjs

module.exports = {
  root: true,
  env: { browser: true, es2020: true },
  extends: [
    'eslint:recommended',
    'plugin:react/recommended',
    'plugin:react/jsx-runtime',
    'plugin:react-hooks/recommended',
  ],
  ignorePatterns: ['dist', '.eslintrc.cjs'],
  parserOptions: { ecmaVersion: 'latest', sourceType: 'module' },
  settings: { react: { version: '18.2' } },
  plugins: ['react-refresh'],
  rules: {
    'react-refresh/only-export-components': [
      'warn',
      { allowConstantExport: true },
    ],
    "react/prop-types": 0
  },
}

constants.index.js

import { facebook, instagram, shieldTick, support, truckFast, twitter } from "../assets/icons";
import { bigShoe1, bigShoe2, bigShoe3, customer1, customer2, shoe4, shoe5, shoe6, shoe7, thumbnailShoe1, thumbnailShoe2, thumbnailShoe3 } from "../assets/images";

export const navLinks = [
    { href: "#home", label: "Home" },
    { href: "#about-us", label: "About Us" },
    { href: "#products", label: "Products" },
    { href: "#contact-us", label: "Contact Us" },
];

export const shoes = [
    {
        thumbnail: thumbnailShoe1,
        bigShoe: bigShoe1,
    },
    {
        thumbnail: thumbnailShoe2,
        bigShoe: bigShoe2,
    },
    {
        thumbnail: thumbnailShoe3,
        bigShoe: bigShoe3,
    },
];

export const statistics = [
    { value: '1k+', label: 'Brands' },
    { value: '500+', label: 'Shops' },
    { value: '250k+', label: 'Customers' },
];

export const products = [
    {
        imgURL: shoe4,
        name: "Nike Air Jordan-01",
        price: "$200.20",
    },
    {
        imgURL: shoe5,
        name: "Nike Air Jordan-10",
        price: "$210.20",
    },
    {
        imgURL: shoe6,
        name: "Nike Air Jordan-100",
        price: "$220.20",
    },
    {
        imgURL: shoe7,
        name: "Nike Air Jordan-001",
        price: "$230.20",
    },
];

export const services = [
    {
        imgURL: truckFast,
        label: "Free shipping",
        subtext: "Enjoy seamless shopping with our complimentary shipping service."
    },
    {
        imgURL: shieldTick,
        label: "Secure Payment",
        subtext: "Experience worry-free transactions with our secure payment options."
    },
    {
        imgURL: support,
        label: "Love to help you",
        subtext: "Our dedicated team is here to assist you every step of the way."
    },
];

export const reviews = [
    {
        imgURL: customer1,
        customerName: 'Morich Brown',
        rating: 4.5,
        feedback: "The attention to detail and the quality of the product exceeded my expectations. Highly recommended!"
    },
    {
        imgURL: customer2,
        customerName: 'Lota Mongeskar',
        rating: 4.5,
        feedback: "The product not only met but exceeded my expectations. I'll definitely be a returning customer!"
    }
];


export const footerLinks = [
    {
        title: "Products",
        links: [
            { name: "Air Force 1", link: "/" },
            { name: "Air Max 1", link: "/" },
            { name: "Air Jordan 1", link: "/" },
            { name: "Air Force 2", link: "/" },
            { name: "Nike Waffle Racer", link: "/" },
            { name: "Nike Cortez", link: "/" },
        ],
    },
    {
        title: "Help",
        links: [
            { name: "About us", link: "/" },
            { name: "FAQs", link: "/" },
            { name: "How it works", link: "/" },
            { name: "Privacy policy", link: "/" },
            { name: "Payment policy", link: "/" },
        ],
    },
    {
        title: "Get in touch",
        links: [
            { name: "customer@nike.com", link: "mailto:customer@nike.com" },
            { name: "+92554862354", link: "tel:+92554862354" },
        ],
    },
];

export const socialMedia = [
    { src: facebook, alt: "facebook logo" },
    { src: twitter, alt: "twitter logo" },
    { src: instagram, alt: "instagram logo" },
];

index.css

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

@tailwind base;
@tailwind components;
@tailwind utilities;

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  scroll-behavior: smooth;
}

@layer components {
  .max-container {
    max-width: 1440px;
    margin: 0 auto;
  }

  .input {
    @apply sm:flex-1 max-sm:w-full text-base leading-normal text-slate-gray pl-5 max-sm:p-5 outline-none sm:border-none border max-sm:border-slate-gray max-sm:rounded-full;
  }
}

@layer utilities {
  .padding {
    @apply sm:px-16 px-8 sm:py-24 py-12;
  }

  .padding-x {
    @apply sm:px-16 px-8;
  }

  .padding-y {
    @apply sm:py-24 py-12;
  }

  .padding-l {
    @apply sm:pl-16 pl-8;
  }

  .padding-r {
    @apply sm:pr-16 pr-8;
  }

  .padding-t {
    @apply sm:pt-24 pt-12;
  }

  .padding-b {
    @apply sm:pb-24 pb-12;
  }

  .info-text {
    @apply font-montserrat text-slate-gray text-lg leading-7;
  }
}

script.js

// To showcase the demo of dark theme. Copy paste :)
<script type="text/javascript">
  document.addEventListener("DOMContentLoaded", () => {
    const toggleDark = document.getElementById('toggleDark')
    toggleDark.addEventListener('click', function() {
      if(document.documentElement.classList.includes('dark')) {
        document.documentElement.classList.remove('dark')
      }
      else {
        document.documentElement.classList.add('dark')
      }
      alert("click!")
    });
  });
</script>

tailwind.config.js

/** @type {import('tailwindcss').Config} */
export default {
  content: [
    "./index.html",
    "./src/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    fontSize: {
      xs: ['12px', '16px'],
      sm: ['14px', '20px'],
      base: ['16px', '19.5px'],
      lg: ['18px', '21.94px'],
      xl: ['20px', '24.38px'],
      '2xl': ['24px', '29.26px'],
      '3xl': ['28px', '50px'],
      '4xl': ['48px', '58px'],
      '8xl': ['96px', '106px']
    },
    extend: {
      fontFamily: {
        palanquin: ['Palanquin', 'sans-serif'],
        montserrat: ['Montserrat', 'sans-serif'],
      },
      colors: {
        'primary': "#ECEEFF",
        "coral-red": "#FF6452",
        "slate-gray": "#6D6D6D",
        "pale-blue": "#F5F6FF",
        "white-400": "rgba(255, 255, 255, 0.80)"
      },
      boxShadow: {
        '3xl': '0 10px 40px rgba(0, 0, 0, 0.1)'
      },
      backgroundImage: {
        'hero': "url('assets/images/collection-background.svg')",
        'card': "url('assets/images/thumbnail-background.svg')",
      },
      screens: {
        "wide": "1440px"
      }
    },
  },
  plugins: [],
}

Hi guys, i want a multiplication icon just same as we used for the hamburger for my responsive navigation. Help me out......Thanks in advance

https://github.com/shubhamxdd/nike_landing_page/blob/master/public/icons/nav_cross.svg

Hi guys, i want a multiplication icon just same as we used for the hamburger for my responsive navigation. Help me out......Thanks in advance

https://github.com/shubhamxdd/nike_landing_page/blob/master/public/icons/nav_cross.svg

Thank you

Is there a chance you have autoformat on save / copy&paste active? If so, try to deactivate it and c&p the index.css again. I had the same error and realized the auto format did break it.

hi, i have question can you help me out? The sm: class does not exist. If sm: is a custom class, make sure it is defined within a @layer directive. how can i fix this?

I solved it by deleting and recreating index.css file

@adrianhajdin , just a heads up, for the video, the errors "Unknown at rule @tailwind" errors can be fixed by adding the following to VSCode's settings.json:

{
    "files.associations": {
        "*.css": "tailwindcss"
    }
}

Here is a link to your video where you start mentioning it:
https://youtu.be/tS7upsfuxmo?si=_EMjhVQFYeMkbCmM&t=3122

I love your videos, but my original language is portuguese and sometimes i dont get it somethings but i learn somuch .. please can you make some videos in portuguese rsrs. Please.

Hello Sir. I'm beginner svg is not support in my vs code. How can i fix this. Please let me know.

you can download this vs coode extention hope it will fix the issue

Does anybody know what is the problem if tailwind css intellisense vscode extension doesn't work?

If you encounter issues with IntelliSense, you can try refreshing it by pressing "Ctrl + Space." This keyboard shortcut will help you get the auto-suggestions and completions provided by IntelliSense.

thanks a lot

I just start, but let me tell you that you're the best ever.

In the tailwind.config.js, it adds a new screen as following:

screens: {
"wide": "1440px"
}

When I print the config in use, it is
screens {
sm: '640px',
md: '768px',
lg: '1024px',
xl: '1280px',
'2xl': '1536px',
wide: '1440px'
}

Just as it states in https://tailwindcss.com/docs/screens#configuring-custom-screens, tailwind does not sort the screen. So, I change it to

const config: Config = {
content: ["./src/**/*.{js,ts,jsx,tsx,mdx}"],
theme: {
screens: {
sm: defaultScreens.sm,
md:defaultScreens.md,
lg:defaultScreens.lg,
xl:defaultScreens.xl,
"wide": "1440px",
"2xl":defaultScreens["2xl"],
},
extend: {
fontFamily: {
// add the css variable and include fallback fonts from tailwind default theme
palanquin: ["var(--font-palanquin)"],
montserrat: ["var(--font-montserrat)"],
},
// screens: {
// "wide": "1440px"
// },
colors: {
primary: "#ECEEFF",
"coral-red": "#FF6452",
"slate-gray": "#6D6D6D",
"pale-blue": "#F5F6FF",
"white-400": "rgba(255, 255, 255, 0.80)",
},
},
},
plugins: [],
};

Can I have your opinion?

As for max-sm or similiar max-XXX, there are no corresponding definitions. Could you add them in?

You are the king Big Bro, Big hug from canada

I just started Tailwind and I am understanding it so well, so happy I found you @adrianhajdin such a legend ❤️

You are a legend bro, happy to come in contact with your contents… so powerful👍

hi i am ahmed

hi threr

hi

cx

hi there i got

the main

h

Hello, World!

Hi

any alternative code snippet for eslintrc.cjs

i only got eslint.config.js upon installing vite

where's the assets zip folder plz, the provided link lands on 404 page

Suppose we don't need the eslint file as its not that important. it's just used to analysed our javascript code for any errors aka linting