Tailwind CSS Courses - Freecodecamp

This is a small tailwind css courses to learn how to use tailwind css

• Tailwind CSS
• FreeCodeCamp
• Course

Tailwind config

tailwind.config = {
    theme: {
        extend: {
            // add custom colors
            colors: {
                pale_orange: '#ffd9a6',
                light_orange: '#fbb03b',
                orange: '#f7931e'
            },
            // add custom fonts
            fontFamily: {
                sans: ['Josefin Sans', 'sans-serif'],
                title: ['Playfair Display SC', 'serif']
            },
            // add custom background images for mobile and desktop
            backgroundImage: {
                mobile: "url('bg-mobile.png')",
                desktop: "url('bg-desktop.png')"
            }
        }
    }
}

Responsive

To make responsive, you start on the mobile version and end on the desktop version.

<div class="bg-mobile md:bg-desktop"></div>