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: [],
}

Thanks

Adrian, you are the best... I'm pretty sure you are from outer space 🧑‍🚀 🚀 🪐

keep up the great work!

I am learning a lot from your video Adrian. Thanks

Thank You From Thailand Great Job Brother!!

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?

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

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?

did you copy tailwind.config.js?

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?

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.

This was extremely fun to do. Spaced repetition is helping me remember how to relatively quickly build. Thank you.

Good afternoon guys . I am having a problem with the tailwind config file. The color variables that are set there are not relecting in my design. did anyone else encounter this and how did you solve this

Thanks

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

Thank you ! keep up the good work.

Hi guys, please i'm stuck, can someone please explain what the issue might be? the problem is in my Nav.jsx file. I noticed the the nike logo did not upload and the navlink items did not appear after applying the code. here is my code

import { hamburger } from "../assets/icons";
import { headerLogo } from "../assets/images";
import { navLinks } from "../constants";

const Nav = () => {
return (

{navLinks.map((item) => (

• 
  
  {item.label}
  
  

))}

Sign in
/
Explore now

);
};

export default Nav;

Hi guys, please i'm stuck, can someone please explain what the issue might be? the problem is in my Nav.jsx file. I noticed the the nike logo did not upload and the navlink items did not appear after applying the code. here is my code

import { hamburger } from "../assets/icons"; import { headerLogo } from "../assets/images"; import { navLinks } from "../constants";

const Nav = () => { return (

{navLinks.map((item) => (

• 
  {item.label}
  

))}

Sign in
/
Explore now

);
};
export default Nav;

copy and paste directly the extracted assets folder from your desktop to your src folder..its will be worked

I can't thank you enough

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

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👍