"use strict"; const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0]; const {useMDXComponents: _provideComponents} = arguments[0]; function _createMdxContent(props) { const _components = { a: "a", code: "code", figure: "figure", h2: "h2", h3: "h3", h4: "h4", img: "img", li: "li", p: "p", pre: "pre", span: "span", ul: "ul", ..._provideComponents(), ...props.components }; return _jsxs(_Fragment, { children: [_jsx(_components.p, { children: "TailwindCSS has become one of the most popular utility-based CSS frameworks for designing web applications. It’s highly versatile and works seamlessly with any front-end framework or library, including Reactjs. In this guide we'll explore how to integrate TailwindCSS in React." }), "\n", _jsx(_components.p, { children: "In this beginner’s guide to React.js, I’ve included TailwindCSS because it pairs so well with React, making it easy to design web apps faster and more efficiently." }), "\n", _jsx(_components.p, { children: "Today, many web apps are built using the React + TailwindCSS combination, a dynamic duo for developers prioritizing speed and flexibility in UI development." }), "\n", _jsx(_components.p, { children: "In this guide, we’ll explore why TailwindCSS is a go-to choice for styling, walk through the steps to integrate it into a React project and tackle the real-world challenge of styling a product list page." }), "\n", _jsx(_components.h2, { children: "Getting Started with TailwindCSS?" }), "\n", _jsxs(_components.p, { children: [_jsx(_components.a, { href: "https://tailwindcss.com/docs/installation", children: "Tailwindcss" }), " is a utility-based CSS framework, meaning each CSS property has its own CSS class. It allows developers to style their web page without writing custom CSS."] }), "\n", _jsx(_components.p, { children: "Unlike traditional CSS frameworks like Bootstrap, TailwindCSS gives developers granular control over the design without being limited by predefined components." }), "\n", _jsx(_components.p, { children: "With its utility-first approach, you can:" }), "\n", _jsxs(_components.ul, { children: ["\n", _jsx(_components.li, { children: "Build responsive designs effortlessly." }), "\n", _jsx(_components.li, { children: "Avoid creating complex CSS files." }), "\n", _jsx(_components.li, { children: "Focus on reusable classes that are easy to understand and modify." }), "\n"] }), "\n", _jsx(_components.p, { children: "TailwindCSS is a game-changer for modern web development, offering flexibility, speed, and scalability." }), "\n", _jsx(_components.h3, { children: "Why is TailwindCSS the go-to choice for styling?" }), "\n", _jsx(_components.p, { children: "TailwindCSS now become the go-to choice for styling web applications. Because it makes the styling super easy, you can style your elements right in HTML without jumping back and forth between files." }), "\n", _jsxs(_components.p, { children: ["The thing I like most about tailwindcss is that we can fully customize or create our own design system using ", _jsx(_components.code, { children: "tainwind.config.js" }), " file."] }), "\n", _jsx(_components.p, { children: "Another best part? TailwindCSS has an amazing ecosystem. The documentation is clear and easy to understand. There are plenty of plugins to extend the functionality and community support is fantastic." }), "\n", _jsx(_components.p, { children: "Here's why developers love TailwindCSS, because," }), "\n", _jsxs(_components.ul, { children: ["\n", _jsx(_components.li, { children: "Easy to use" }), "\n", _jsx(_components.li, { children: "Customizable" }), "\n", _jsx(_components.li, { children: "Responsive Design Made Simple" }), "\n", _jsx(_components.li, { children: "Faster Development" }), "\n", _jsx(_components.li, { children: "Great Ecosystem" }), "\n"] }), "\n", _jsx(_components.h3, { children: "Step-by-Step Guide to Integrate TailwindCSS in React" }), "\n", _jsx(_components.p, { children: "Let’s dive into the integration process. Follow these steps to add TailwindCSS to a React project and start styling right away." }), "\n", _jsx(_components.h4, { children: "Step 1: Create a React App" }), "\n", _jsx(_components.p, { children: "First, set up a React app. If you already have one, you can skip this step. Otherwise, use the following command to create a new React application:" }), "\n", _jsx(_components.figure, { "data-rehype-pretty-code-figure": "", children: _jsx(_components.pre, { tabIndex: "0", "data-language": "shell", "data-theme": "github-dark", children: _jsx(_components.code, { "data-language": "shell", "data-theme": "github-dark", style: { display: "grid" }, children: _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#B392F0" }, children: "npx" }), _jsx(_components.span, { style: { color: "#9ECBFF" }, children: " create-react-app" }), _jsx(_components.span, { style: { color: "#9ECBFF" }, children: " my-app" })] }) }) }) }), "\n", _jsx(_components.p, { children: "Navigate to your project directory:" }), "\n", _jsx(_components.figure, { "data-rehype-pretty-code-figure": "", children: _jsx(_components.pre, { tabIndex: "0", "data-language": "shell", "data-theme": "github-dark", children: _jsx(_components.code, { "data-language": "shell", "data-theme": "github-dark", style: { display: "grid" }, children: _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#79B8FF" }, children: "cd" }), _jsx(_components.span, { style: { color: "#9ECBFF" }, children: " my-app" })] }) }) }) }), "\n", _jsx(_components.h4, { children: "Step 2: Installing TailwindCSS in React" }), "\n", _jsx(_components.p, { children: "Install TailwindCSS and its peer dependencies using npm or yarn. Run this command:" }), "\n", _jsx(_components.figure, { "data-rehype-pretty-code-figure": "", children: _jsx(_components.pre, { tabIndex: "0", "data-language": "shell", "data-theme": "github-dark", children: _jsx(_components.code, { "data-language": "shell", "data-theme": "github-dark", style: { display: "grid" }, children: _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#B392F0" }, children: "npm" }), _jsx(_components.span, { style: { color: "#9ECBFF" }, children: " install" }), _jsx(_components.span, { style: { color: "#79B8FF" }, children: " -D" }), _jsx(_components.span, { style: { color: "#9ECBFF" }, children: " tailwindcss" }), _jsx(_components.span, { style: { color: "#9ECBFF" }, children: " postcss" }), _jsx(_components.span, { style: { color: "#9ECBFF" }, children: " autoprefixer" })] }) }) }) }), "\n", _jsx(_components.p, { children: "ShellScript" }), "\n", _jsxs(_components.p, { children: ["Next, generate the ", _jsx(_components.code, { children: "tailwind.config.js" }), " file:"] }), "\n", _jsx(_components.figure, { "data-rehype-pretty-code-figure": "", children: _jsx(_components.pre, { tabIndex: "0", "data-language": "shell", "data-theme": "github-dark", children: _jsx(_components.code, { "data-language": "shell", "data-theme": "github-dark", style: { display: "grid" }, children: _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#B392F0" }, children: "npx" }), _jsx(_components.span, { style: { color: "#9ECBFF" }, children: " tailwindcss" }), _jsx(_components.span, { style: { color: "#9ECBFF" }, children: " init" })] }) }) }) }), "\n", _jsx(_components.p, { children: "This will create a default configuration file where you can customize TailwindCSS settings." }), "\n", _jsx(_components.h4, { children: "Step 3: Configuring TailwindCSS in our app" }), "\n", _jsxs(_components.p, { children: ["Update the ", _jsx(_components.code, { children: "tailwind.config.js" }), " file to specify the paths to all your template files. This ensures TailwindCSS purges unused styles during production builds:"] }), "\n", _jsx(_components.figure, { "data-rehype-pretty-code-figure": "", children: _jsx(_components.pre, { tabIndex: "0", "data-language": "js", "data-theme": "github-dark", children: _jsxs(_components.code, { "data-language": "js", "data-theme": "github-dark", style: { display: "grid" }, children: [_jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#79B8FF" }, children: "module" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "." }), _jsx(_components.span, { style: { color: "#79B8FF" }, children: "exports" }), _jsx(_components.span, { style: { color: "#F97583" }, children: " =" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " {" })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " content: [" }) }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#9ECBFF" }, children: " \"./src/**/*.{js,jsx,ts,tsx}\"" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "," })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " ]," }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " theme: {" }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " extend: {}," }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " }," }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " plugins: []," }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "};" }) })] }) }) }), "\n", _jsxs(_components.p, { children: ["Next, add the Tailwind directives to your CSS file. Locate or create a ", _jsx(_components.code, { children: "src/index.css" }), " file, then include the following:"] }), "\n", _jsx(_components.figure, { "data-rehype-pretty-code-figure": "", children: _jsx(_components.pre, { tabIndex: "0", "data-language": "css", "data-theme": "github-dark", children: _jsxs(_components.code, { "data-language": "css", "data-theme": "github-dark", style: { display: "grid" }, children: [_jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#F97583" }, children: "@tailwind" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " base;" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#F97583" }, children: "@tailwind" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " components;" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#F97583" }, children: "@tailwind" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " utilities;" })] })] }) }) }), "\n", _jsxs(_components.p, { children: ["Finally, import this CSS file into your React project. Open ", _jsx(_components.code, { children: "src/index.js" }), " and add:"] }), "\n", _jsx(_components.figure, { "data-rehype-pretty-code-figure": "", children: _jsx(_components.pre, { tabIndex: "0", "data-language": "shell", "data-theme": "github-dark", children: _jsx(_components.code, { "data-language": "shell", "data-theme": "github-dark", style: { display: "grid" }, children: _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#B392F0" }, children: "import" }), _jsx(_components.span, { style: { color: "#9ECBFF" }, children: " './index.css'" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ";" })] }) }) }) }), "\n", _jsx(_components.p, { children: "That’s it! TailwindCSS is now integrated into your React project." }), "\n", _jsxs(_components.p, { children: ["Developers are always in search of the solution for faster development and pre-built components. That's why there are so many tailwind-based reactjs-specific component libraries available. Here is a list of some of the popular ", _jsx(_components.a, { href: "https://programmingly.dev/best-tailwind-css-based-react-design-libraries-to-use-in-2024", children: "tailwindcss based react-specific components libraries" }), "."] }), "\n", _jsx(_components.h3, { children: "Design a Product Preview Card (Challenge)" }), "\n", _jsxs(_components.p, { children: ["I have taken this ", _jsx(_components.a, { href: "https://www.frontendmentor.io/challenges/product-preview-card-component-GO7UmttRfa", children: "Product Preview Card - Challenge by Frontendmentor.io" }), ". In this article, you'll only see how to design this Product Preview Card using TailwindCSS & React."] }), "\n", _jsxs(_components.p, { children: ["Learning by doing is a good way to master something, that's why I choose to build a small project. You'll find the ", _jsx(_components.a, { href: "https://frontendweb-challenges.netlify.app/product-card-preview", children: "working demo here" }), ", and access the check ", _jsx(_components.a, { href: "https://github.com/roman-myspace/frontend-challenges/blob/main/app/(product-preview-challenge)/product-card-preview/page.tsx", children: "code at GitHub" }), "."] }), "\n", _jsxs(_components.p, { children: ["Once I take challenge, after downloading initial files from frontendmentor.io. I need to configure some styles in my ", _jsx(_components.code, { children: "tailwind.config." }), "ts file (I'm using typescript that's why file extension is ", _jsx(_components.code, { children: ".ts" }), ")."] }), "\n", _jsxs(_components.p, { children: ["Here is why final ", _jsx(_components.code, { children: "tailwind.config.ts" }), " file looks like:"] }), "\n", _jsx(_components.figure, { "data-rehype-pretty-code-figure": "", children: _jsx(_components.pre, { tabIndex: "0", "data-language": "js", "data-theme": "github-dark", children: _jsxs(_components.code, { "data-language": "js", "data-theme": "github-dark", style: { display: "grid" }, children: [_jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#F97583" }, children: " import" }), _jsx(_components.span, { style: { color: "#F97583" }, children: " type" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " { Config } " }), _jsx(_components.span, { style: { color: "#F97583" }, children: "from" }), _jsx(_components.span, { style: { color: "#9ECBFF" }, children: " \"tailwindcss\"" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ";" })] }), "\n", _jsx(_components.span, { "data-line": "", children: " " }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#F97583" }, children: "const" }), _jsx(_components.span, { style: { color: "#79B8FF" }, children: " config" }), _jsx(_components.span, { style: { color: "#F97583" }, children: ":" }), _jsx(_components.span, { style: { color: "#B392F0" }, children: " Config" }), _jsx(_components.span, { style: { color: "#F97583" }, children: " =" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " {" })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " content: [" }) }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#9ECBFF" }, children: " \"./pages/**/*.{js,ts,jsx,tsx,mdx}\"" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "," })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#9ECBFF" }, children: " \"./components/**/*.{js,ts,jsx,tsx,mdx}\"" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "," })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#9ECBFF" }, children: " \"./app/**/*.{js,ts,jsx,tsx,mdx}\"" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "," })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " ]," }) }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E1E4E8" }, children: " darkMode: " }), _jsx(_components.span, { style: { color: "#9ECBFF" }, children: "\"class\"" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "," })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " theme: {" }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " extend: {" }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " screens: {" }) }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E1E4E8" }, children: " xs: " }), _jsx(_components.span, { style: { color: "#9ECBFF" }, children: "\"400px\"" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "," })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E1E4E8" }, children: " xxs: " }), _jsx(_components.span, { style: { color: "#9ECBFF" }, children: "\"300px\"" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "," })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " }," }) }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E1E4E8" }, children: " colors: { " }), _jsx(_components.span, { style: { color: "#6A737D" }, children: "// Customize & Define design specific colors here" })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " productPreview: {" }) }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E1E4E8" }, children: " dark_cyan: " }), _jsx(_components.span, { style: { color: "#9ECBFF" }, children: "\"hsl(158, 36%, 37%)\"" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "," })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E1E4E8" }, children: " cream: " }), _jsx(_components.span, { style: { color: "#9ECBFF" }, children: "\"hsl(30, 38%, 92%)\"" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "," })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E1E4E8" }, children: " dark_blue: " }), _jsx(_components.span, { style: { color: "#9ECBFF" }, children: "\"hsl(212, 21%, 14%)\"" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "," })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E1E4E8" }, children: " grayish_blue: " }), _jsx(_components.span, { style: { color: "#9ECBFF" }, children: "\"hsl(228, 12%, 48%)\"" })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " }" }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " }," }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " }," }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " }," }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " plugins: []," }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "};" }) }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#F97583" }, children: "export" }), _jsx(_components.span, { style: { color: "#F97583" }, children: " default" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " config;" })] })] }) }) }), "\n", _jsxs(_components.p, { children: ["Once my colors are defined here, now I can use color anywhere in my project e.g, ", _jsx(_components.code, { children: "text-productPreview-dark_cyan" }), ", ", _jsx(_components.code, { children: "bg-productPreview-cream" }), ". Did you see, how easy it is to define color once and use them for all, like, text-color, background, border, and so on."] }), "\n", _jsx(_components.p, { children: "Next, we'll see the actual card. I created a separate component for the Product Preview Card using react components. Here is the complete code:" }), "\n", _jsx(_components.figure, { "data-rehype-pretty-code-figure": "", children: _jsx(_components.pre, { tabIndex: "0", "data-language": "jsx", "data-theme": "github-dark", children: _jsxs(_components.code, { "data-language": "jsx", "data-theme": "github-dark", style: { display: "grid" }, children: [_jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#F97583" }, children: " import" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " React " }), _jsx(_components.span, { style: { color: "#F97583" }, children: "from" }), _jsx(_components.span, { style: { color: "#9ECBFF" }, children: " 'react'" })] }), "\n", _jsx(_components.span, { "data-line": "", children: " " }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#F97583" }, children: "export" }), _jsx(_components.span, { style: { color: "#F97583" }, children: " default" }), _jsx(_components.span, { style: { color: "#F97583" }, children: " function" }), _jsx(_components.span, { style: { color: "#B392F0" }, children: " ProductPreviewCard" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "() {" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#F97583" }, children: " return" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " (" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E1E4E8" }, children: " <" }), _jsx(_components.span, { style: { color: "#85E89D" }, children: "section" }), _jsx(_components.span, { style: { color: "#B392F0" }, children: " className" }), _jsx(_components.span, { style: { color: "#F97583" }, children: "=" }), _jsx(_components.span, { style: { color: "#9ECBFF" }, children: "\"bg-white max-w-[500px] sm:max-w-[700px] overflow-hidden rounded-lg grid grid-cols-1 sm:grid-cols-2\"" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ">" })] }), "\n", _jsx(_components.span, { "data-line": "", children: " " }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E1E4E8" }, children: " {" }), _jsx(_components.span, { style: { color: "#6A737D" }, children: "/* product image */" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "}" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E1E4E8" }, children: " <" }), _jsx(_components.span, { style: { color: "#85E89D" }, children: "picture" }), _jsx(_components.span, { style: { color: "#B392F0" }, children: " className" }), _jsx(_components.span, { style: { color: "#F97583" }, children: "=" }), _jsx(_components.span, { style: { color: "#9ECBFF" }, children: "'w-full h-full object-center'" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ">" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E1E4E8" }, children: " <" }), _jsx(_components.span, { style: { color: "#85E89D" }, children: "source" }), _jsx(_components.span, { style: { color: "#B392F0" }, children: " srcSet" }), _jsx(_components.span, { style: { color: "#F97583" }, children: "=" }), _jsx(_components.span, { style: { color: "#9ECBFF" }, children: "'/icons/product-preview-card/image-product-mobile.jpg'" }), _jsx(_components.span, { style: { color: "#B392F0" }, children: " media" }), _jsx(_components.span, { style: { color: "#F97583" }, children: "=" }), _jsx(_components.span, { style: { color: "#9ECBFF" }, children: "\"(max-width:639px)\"" }), _jsx(_components.span, { style: { color: "#B392F0" }, children: " className" }), _jsx(_components.span, { style: { color: "#F97583" }, children: "=" }), _jsx(_components.span, { style: { color: "#9ECBFF" }, children: "'w-full h-full object-cover'" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " />" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E1E4E8" }, children: " <" }), _jsx(_components.span, { style: { color: "#85E89D" }, children: "img" }), _jsx(_components.span, { style: { color: "#B392F0" }, children: " src" }), _jsx(_components.span, { style: { color: "#F97583" }, children: "=" }), _jsx(_components.span, { style: { color: "#9ECBFF" }, children: "'/icons/product-preview-card/image-product-desktop.jpg'" }), _jsx(_components.span, { style: { color: "#B392F0" }, children: " alt" }), _jsx(_components.span, { style: { color: "#F97583" }, children: "=" }), _jsx(_components.span, { style: { color: "#9ECBFF" }, children: "\"Product Image\"" }), _jsx(_components.span, { style: { color: "#B392F0" }, children: " className" }), _jsx(_components.span, { style: { color: "#F97583" }, children: "=" }), _jsx(_components.span, { style: { color: "#9ECBFF" }, children: "'w-full h-full object-cover'" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " />" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E1E4E8" }, children: " " })] }), "\n", _jsx(_components.span, { "data-line": "", children: " " }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E1E4E8" }, children: " {" }), _jsx(_components.span, { style: { color: "#6A737D" }, children: "/* text content */" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "}" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E1E4E8" }, children: " <" }), _jsx(_components.span, { style: { color: "#85E89D" }, children: "article" }), _jsx(_components.span, { style: { color: "#B392F0" }, children: " className" }), _jsx(_components.span, { style: { color: "#F97583" }, children: "=" }), _jsx(_components.span, { style: { color: "#9ECBFF" }, children: "\"p-6 sm:p-8 flex flex-col justify-between\"" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ">" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E1E4E8" }, children: " <" }), _jsx(_components.span, { style: { color: "#85E89D" }, children: "p" }), _jsx(_components.span, { style: { color: "#B392F0" }, children: " className" }), _jsx(_components.span, { style: { color: "#F97583" }, children: "=" }), _jsx(_components.span, { style: { color: "#9ECBFF" }, children: "'uppercase text-productPreview-grayish_blue font-medium tracking-[0.3em]'" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ">Perfume" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E1E4E8" }, children: " <" }), _jsx(_components.span, { style: { color: "#85E89D" }, children: "h1" }), _jsx(_components.span, { style: { color: "#B392F0" }, children: " className" }), _jsx(_components.span, { style: { color: "#F97583" }, children: "=" }), _jsx(_components.span, { style: { color: "#9ECBFF" }, children: "'mt-4 sm:mt-6 text-3xl sm:text-4xl font-bold'" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ">Gabrielle Essence Eau De Parfum" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E1E4E8" }, children: " <" }), _jsx(_components.span, { style: { color: "#85E89D" }, children: "p" }), _jsx(_components.span, { style: { color: "#B392F0" }, children: " className" }), _jsx(_components.span, { style: { color: "#F97583" }, children: "=" }), _jsx(_components.span, { style: { color: "#9ECBFF" }, children: "'mt-4 sm:mt-6 text-base text-productPreview-grayish_blue font-medium'" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ">A floral, solar and voluptuous interpretation composed by Olivier Polge," })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E1E4E8" }, children: " Perfumer-Creator for the House of CHANEL." })] }), "\n", _jsx(_components.span, { "data-line": "", children: " " }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E1E4E8" }, children: " <" }), _jsx(_components.span, { style: { color: "#85E89D" }, children: "div" }), _jsx(_components.span, { style: { color: "#B392F0" }, children: " className" }), _jsx(_components.span, { style: { color: "#F97583" }, children: "=" }), _jsx(_components.span, { style: { color: "#9ECBFF" }, children: "\"flex items-center gap-4 mt-6 sm:mt-8\"" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ">" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E1E4E8" }, children: " <" }), _jsx(_components.span, { style: { color: "#85E89D" }, children: "h2" }), _jsx(_components.span, { style: { color: "#B392F0" }, children: " className" }), _jsx(_components.span, { style: { color: "#F97583" }, children: "=" }), _jsx(_components.span, { style: { color: "#9ECBFF" }, children: "'text-productPreview-dark_cyan font-bold text-3xl'" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ">$149.99" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E1E4E8" }, children: " <" }), _jsx(_components.span, { style: { color: "#85E89D" }, children: "p" }), _jsx(_components.span, { style: { color: "#B392F0" }, children: " className" }), _jsx(_components.span, { style: { color: "#F97583" }, children: "=" }), _jsx(_components.span, { style: { color: "#9ECBFF" }, children: "'text-sm line-through text-productPreview-grayish_blue font-medium'" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ">$169.99" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E1E4E8" }, children: " " })] }), "\n", _jsx(_components.span, { "data-line": "", children: " " }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E1E4E8" }, children: " <" }), _jsx(_components.span, { style: { color: "#85E89D" }, children: "button" }), _jsx(_components.span, { style: { color: "#B392F0" }, children: " type" }), _jsx(_components.span, { style: { color: "#F97583" }, children: "=" }), _jsx(_components.span, { style: { color: "#9ECBFF" }, children: "'button'" }), _jsx(_components.span, { style: { color: "#B392F0" }, children: " className" }), _jsx(_components.span, { style: { color: "#F97583" }, children: "=" }), _jsx(_components.span, { style: { color: "#9ECBFF" }, children: "'bg-productPreview-dark_cyan rounded-lg p-4 text-base text-white flex items-center gap-2 justify-center w-full mt-8'" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ">" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E1E4E8" }, children: " <" }), _jsx(_components.span, { style: { color: "#85E89D" }, children: "img" }), _jsx(_components.span, { style: { color: "#B392F0" }, children: " src" }), _jsx(_components.span, { style: { color: "#F97583" }, children: "=" }), _jsx(_components.span, { style: { color: "#9ECBFF" }, children: "'/icons/product-preview-card/icon-cart.svg'" }), _jsx(_components.span, { style: { color: "#B392F0" }, children: " alt" }), _jsx(_components.span, { style: { color: "#F97583" }, children: "=" }), _jsx(_components.span, { style: { color: "#9ECBFF" }, children: "'cart icon'" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " />" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E1E4E8" }, children: " <" }), _jsx(_components.span, { style: { color: "#85E89D" }, children: "span" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ">Add to Cart" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E1E4E8" }, children: " " })] }), "\n", _jsx(_components.span, { "data-line": "", children: " " }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E1E4E8" }, children: " " })] }), "\n", _jsx(_components.span, { "data-line": "", children: " " }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E1E4E8" }, children: " " })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " )" }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "}" }) })] }) }) }), "\n", _jsxs(_components.p, { children: ["You'll see a lot of code here, but I want you to just focus on ", _jsx(_components.code, { children: "className" }), " attribute. This is all I have no extra or custom CSS I used here nor are these classes used in any CSS file. All these classes are generated & provided by TailwindCSS, which we used here."] }), "\n", _jsx(_components.p, { children: "Here is the Output result of Challenge Completed:" }), "\n", _jsx(_components.p, { children: _jsx(_components.img, { src: "https://iukfpyemhzrbbamzihpp.supabase.co/storage/v1/object/public/assets/blog-thumbnail-1753361432553", alt: "challenge card image" }) }), "\n", _jsx(_components.p, { children: "After the compilation, tailwindcss generates these classes and bundles only those classes that are used here into a CSS file. This is good for optimization purposes to keep the smaller size of the file." }), "\n", _jsx(_components.h3, { children: "Wrapping up" }), "\n", _jsx(_components.p, { children: "Integrating TailwindCSS with React allows you to build stylish, responsive web apps quickly and efficiently. With its utility-first approach, you can focus on crafting delightful user interfaces without worrying about writing extensive CSS from scratch." }), "\n", _jsx(_components.p, { children: "Whether you’re a beginner or a seasoned developer, mastering the React + TailwindCSS combination is a valuable skill that will enhance your workflow and productivity." }), "\n", _jsx(_components.p, { children: "Ready to give it a try? Start building with React and TailwindCSS today, and watch your styling process become smoother than ever!" })] }); } function MDXContent(props = {}) { const {wrapper: MDXLayout} = { ..._provideComponents(), ...props.components }; return MDXLayout ? _jsx(MDXLayout, { ...props, children: _jsx(_createMdxContent, { ...props }) }) : _createMdxContent(props); } return { default: MDXContent };