"use strict"; const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0]; const {useMDXComponents: _provideComponents} = arguments[0]; function _createMdxContent(props) { const _components = { code: "code", p: "p", pre: "pre", span: "span", ..._provideComponents(), ...props.components }; return _jsxs(_Fragment, { children: [_jsx(_components.p, { children: "Tailwind reduces the need to write custom CSS and increases the customizability of the project. With benefits like responsive design, dynamic and reusable classes, consistency, and broad community support, Tailwind is a popular choice in modern web development. Tailwind reduces the file size of the project and improves performance by removing unused style rules and generating only the styles that are needed. It allows developers to quickly adapt to the project. Tailwind offers comprehensive documentation and a large community. Users can quickly solve their problems and access information. You can always visit the docs and search for the feature in question." }), "\n", _jsx(_components.p, { children: "Let's examine how we install and use Tailwind CSS in our React project." }), "\n", _jsx(_components.p, { children: "I'm creating our React project." }), "\n", _jsx(_components.pre, { className: "language-javascript", children: _jsxs(_components.code, { className: "language-javascript", children: ["npx create", _jsx(_components.span, { className: "token operator", children: "-" }), "react", _jsx(_components.span, { className: "token operator", children: "-" }), "app my", _jsx(_components.span, { className: "token operator", children: "-" }), "project\ncd my", _jsx(_components.span, { className: "token operator", children: "-" }), "project\n"] }) }), "\n", _jsx(_components.p, { children: "First of all, we need to add Tailwind to your project. You can install Tailwind with a command like this:" }), "\n", _jsx(_components.pre, { className: "language-javascript", children: _jsxs(_components.code, { className: "language-javascript", children: ["npm install ", _jsx(_components.span, { className: "token operator", children: "-" }), _jsx(_components.span, { className: "token constant", children: "D" }), " tailwindcss\n"] }) }), "\n", _jsx(_components.p, { children: "Configuration:\nBefore using Tailwind, we create a configuration file. We can create a file called tailwind.config.js in the root directory of your project and make your customizations there." }), "\n", _jsx(_components.p, { children: "Run this command to create the tailwind.config.js file:" }), "\n", _jsx(_components.pre, { className: "language-javascript", children: _jsx(_components.code, { className: "language-javascript", children: "npx tailwindcss init\n" }) }), "\n", _jsx(_components.p, { children: "An example tailwind.config.js file:" }), "\n", _jsx(_components.pre, { className: "language-javascript", children: _jsxs(_components.code, { className: "language-javascript", children: [_jsxs(_components.span, { className: "token doc-comment comment", children: ["/** ", _jsx(_components.span, { className: "token keyword", children: "@type" }), " ", _jsxs(_components.span, { className: "token class-name", children: [_jsx(_components.span, { className: "token punctuation", children: "{" }), _jsx(_components.span, { className: "token keyword module", children: "import" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token string", children: "'tailwindcss'" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: "." }), "Config", _jsx(_components.span, { className: "token punctuation", children: "}" })] }), " */"] }), "\nmodule", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token property-access", children: "exports" }), " ", _jsx(_components.span, { className: "token operator", children: "=" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n ", _jsx(_components.span, { className: "token literal-property property", children: "content" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token punctuation", children: "[" }), _jsx(_components.span, { className: "token string", children: "\"./src/**/*.{js,jsx,ts,tsx}\"" }), _jsx(_components.span, { className: "token punctuation", children: "]" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n ", _jsx(_components.span, { className: "token literal-property property", children: "theme" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n ", _jsx(_components.span, { className: "token literal-property property", children: "extend" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n ", _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n ", _jsx(_components.span, { className: "token literal-property property", children: "plugins" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token punctuation", children: "[" }), _jsx(_components.span, { className: "token punctuation", children: "]" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n", _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }) }), "\n", _jsx(_components.p, { children: "Creating CSS:\nAfter adding Tailwind to your project, create a CSS file and add the Tailwind classes to it. You can create a sample file like this (for example, index.css):" }), "\n", _jsx(_components.pre, { className: "language-javascript", children: _jsxs(_components.code, { className: "language-javascript", children: [_jsx(_components.span, { className: "token comment", children: "/* index.css */" }), "\n@tailwind base", _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n@tailwind components", _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n@tailwind utilities", _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n\n", _jsx(_components.span, { className: "token comment", children: "/* You can add custom styles here as needed */" }), "\n"] }) }), "\n", _jsx(_components.p, { children: "Usage in HTML:\nYou can apply styling by adding Tailwind classes to elements. For example:" }), "\n", _jsx(_components.pre, { className: "language-javascript", children: _jsxs(_components.code, { className: "language-javascript", children: [_jsx(_components.span, { className: "token keyword", children: "function" }), " ", _jsx(_components.span, { className: "token function", children: _jsx(_components.span, { className: "token maybe-class-name", children: "App" }) }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n ", _jsx(_components.span, { className: "token keyword control-flow", children: "return" }), " ", _jsx(_components.span, { className: "token punctuation", children: "(" }), "\n ", _jsx(_components.span, { className: "token operator", children: "<" }), "div className", _jsx(_components.span, { className: "token operator", children: "=" }), _jsx(_components.span, { className: "token string", children: "\"container mx-auto mt-8 p-4\"" }), _jsx(_components.span, { className: "token operator", children: ">" }), "\n ", _jsx(_components.span, { className: "token operator", children: "<" }), "div className", _jsx(_components.span, { className: "token operator", children: "=" }), _jsx(_components.span, { className: "token string", children: "\"max-w-md mx-auto bg-stone-700 rounded-md overflow-hidden shadow-md\"" }), _jsx(_components.span, { className: "token operator", children: ">" }), "\n ", _jsx(_components.span, { className: "token operator", children: "<" }), "img\n className", _jsx(_components.span, { className: "token operator", children: "=" }), _jsx(_components.span, { className: "token string", children: "\"w-full h-48 object-cover\"" }), "\n src", _jsx(_components.span, { className: "token operator", children: "=" }), _jsx(_components.span, { className: "token string", children: "\"https://source.unsplash.com/800x600/?cat\"" }), "\n alt", _jsx(_components.span, { className: "token operator", children: "=" }), _jsx(_components.span, { className: "token string", children: "\"Kedi Resmi\"" }), "\n ", _jsx(_components.span, { className: "token operator", children: "/" }), _jsx(_components.span, { className: "token operator", children: ">" }), "\n ", _jsx(_components.span, { className: "token operator", children: "<" }), "div className", _jsx(_components.span, { className: "token operator", children: "=" }), _jsx(_components.span, { className: "token string", children: "\"p-4\"" }), _jsx(_components.span, { className: "token operator", children: ">" }), "\n ", _jsx(_components.span, { className: "token operator", children: "<" }), "h1 className", _jsx(_components.span, { className: "token operator", children: "=" }), _jsx(_components.span, { className: "token string", children: "\"text-2xl font-bold mb-2 text-gray-50\"" }), _jsx(_components.span, { className: "token operator", children: ">" }), _jsx(_components.span, { className: "token maybe-class-name", children: "Cute" }), " cat ", _jsx(_components.span, { className: "token operator", children: "<" }), _jsx(_components.span, { className: "token operator", children: "/" }), "h1", _jsx(_components.span, { className: "token operator", children: ">" }), "\n ", _jsx(_components.span, { className: "token operator", children: "<" }), "p className", _jsx(_components.span, { className: "token operator", children: "=" }), _jsx(_components.span, { className: "token string", children: "\"text-slate-300\"" }), _jsx(_components.span, { className: "token operator", children: ">" }), "\n ", _jsx(_components.span, { className: "token maybe-class-name", children: "Lorem" }), " ipsum dolor sit amet", _jsx(_components.span, { className: "token punctuation", children: "," }), " consectetur adipiscing elit", _jsx(_components.span, { className: "token punctuation", children: "." }), " ", _jsx(_components.span, { className: "token property-access", children: _jsx(_components.span, { className: "token maybe-class-name", children: "Nulla" }) }), " quam\n velit", _jsx(_components.span, { className: "token punctuation", children: "," }), " vulputate eu pharetra nec", _jsx(_components.span, { className: "token punctuation", children: "," }), " mattis ac neque", _jsx(_components.span, { className: "token punctuation", children: "." }), "\n ", _jsx(_components.span, { className: "token operator", children: "<" }), _jsx(_components.span, { className: "token operator", children: "/" }), "p", _jsx(_components.span, { className: "token operator", children: ">" }), "\n ", _jsx(_components.span, { className: "token operator", children: "<" }), "div className", _jsx(_components.span, { className: "token operator", children: "=" }), _jsx(_components.span, { className: "token string", children: "\"mt-4\"" }), _jsx(_components.span, { className: "token operator", children: ">" }), "\n ", _jsx(_components.span, { className: "token operator", children: "<" }), "span className", _jsx(_components.span, { className: "token operator", children: "=" }), _jsx(_components.span, { className: "token string", children: "\"text-sm text-gray-400\"" }), _jsx(_components.span, { className: "token operator", children: ">" }), "\n ", _jsx(_components.span, { className: "token literal-property property", children: "Category" }), _jsx(_components.span, { className: "token operator", children: ":" }), "\n ", _jsx(_components.span, { className: "token operator", children: "<" }), "a href", _jsx(_components.span, { className: "token operator", children: "=" }), _jsx(_components.span, { className: "token string", children: "\"#\"" }), " className", _jsx(_components.span, { className: "token operator", children: "=" }), _jsx(_components.span, { className: "token string", children: "\"text-amber-300\"" }), _jsx(_components.span, { className: "token operator", children: ">" }), "\n ", _jsx(_components.span, { className: "token maybe-class-name", children: "Animals" }), "\n ", _jsx(_components.span, { className: "token operator", children: "<" }), _jsx(_components.span, { className: "token operator", children: "/" }), "a", _jsx(_components.span, { className: "token operator", children: ">" }), "\n ", _jsx(_components.span, { className: "token operator", children: "<" }), _jsx(_components.span, { className: "token operator", children: "/" }), "span", _jsx(_components.span, { className: "token operator", children: ">" }), "\n ", _jsx(_components.span, { className: "token operator", children: "<" }), _jsx(_components.span, { className: "token operator", children: "/" }), "div", _jsx(_components.span, { className: "token operator", children: ">" }), "\n ", _jsx(_components.span, { className: "token operator", children: "<" }), _jsx(_components.span, { className: "token operator", children: "/" }), "div", _jsx(_components.span, { className: "token operator", children: ">" }), "\n ", _jsx(_components.span, { className: "token operator", children: "<" }), _jsx(_components.span, { className: "token operator", children: "/" }), "div", _jsx(_components.span, { className: "token operator", children: ">" }), "\n ", _jsx(_components.span, { className: "token operator", children: "<" }), _jsx(_components.span, { className: "token operator", children: "/" }), "div", _jsx(_components.span, { className: "token operator", children: ">" }), "\n ", _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n", _jsx(_components.span, { className: "token punctuation", children: "}" }), "\n\n", _jsx(_components.span, { className: "token keyword module", children: "export" }), " ", _jsx(_components.span, { className: "token keyword module", children: "default" }), " ", _jsx(_components.span, { className: "token maybe-class-name", children: "App" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }) }), "\n", _jsx("img", { className: "w-8/12 ", src: "https://res.cloudinary.com/djfqidbj1/image/upload/v1707339526/nfp3pz0ilrlqpafev6ba.jpg", alt: "onurtaskiran" }), "\n", _jsx(_components.p, { children: "In this example, there is a picture card and a grid structure on the page." }), "\n", _jsx(_components.p, { children: "container mx-auto mt-8 p-4: These classes centralize the content container, leave a space at the top, and add internal space around the content." }), "\n", _jsx(_components.p, { children: "max-w-md mx-auto bg-stone-700 rounded-md overflow-hidden shadow-md: These classes set maximum width (md: medium), center content, set background color to stone-700, round corners, hide overflow and add a shadow." }), "\n", _jsx(_components.p, { children: "w-full h-48 object-cover: These classes stretch the image width (w-full), set its height (h-48), and the object-cover class ensures the image covers the container while maintaining its aspect ratio." }), "\n", _jsx(_components.p, { children: "text-2xl font-bold mb-2 text-gray-50: These classes style the title; they set the text size (text-2xl), choose a bold font (font-bold), add bottom margin (mb-2), and set the text color (text-gray-50)." }), "\n", _jsx(_components.p, { children: "text-slate-300: This class sets the text color." }), "\n", _jsx(_components.p, { children: "mt-4: This class adds top margin (mt-4)." }), "\n", _jsx(_components.p, { children: "text-sm text-gray-400: These classes set a small text size (text-sm) and define the text color (text-gray-400)." }), "\n", _jsx(_components.p, { children: "text-amber-300: This class sets the text color (text-amber-300)." }), "\n", _jsx(_components.p, { children: "By following these simple steps, you can quickly apply styles to your project using Tailwind CSS. It's also beneficial to explore Tailwind CSS's comprehensive documentation: Tailwind CSS Documentation." }), "\n", _jsx(_components.p, { children: "Custom Css" }), "\n", _jsx(_components.p, { children: "Let's see how we can create our own custom class. so we can avoid some repetitions." }), "\n", _jsx(_components.pre, { className: "language-javascript", children: _jsxs(_components.code, { className: "language-javascript", children: ["max", _jsx(_components.span, { className: "token operator", children: "-" }), "w", _jsx(_components.span, { className: "token operator", children: "-" }), "md mx", _jsx(_components.span, { className: "token operator", children: "-" }), "auto bg", _jsx(_components.span, { className: "token operator", children: "-" }), "stone", _jsx(_components.span, { className: "token operator", children: "-" }), _jsx(_components.span, { className: "token number", children: "700" }), "\n"] }) }), "\n", _jsx(_components.p, { children: "I use these two classes to center the elements, and with the other we give color. I basically align them the same way. I want to do the same for future episodes." }), "\n", _jsx(_components.pre, { className: "language-javascript", children: _jsxs(_components.code, { className: "language-javascript", children: ["@tailwind base", _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n@tailwind components", _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n@tailwind utilities", _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n\n@layer components ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n ", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token property-access", children: "align" }), _jsx(_components.span, { className: "token operator", children: "-" }), "item ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n @apply max", _jsx(_components.span, { className: "token operator", children: "-" }), "w", _jsx(_components.span, { className: "token operator", children: "-" }), "md mx", _jsx(_components.span, { className: "token operator", children: "-" }), "auto bg", _jsx(_components.span, { className: "token operator", children: "-" }), "stone", _jsx(_components.span, { className: "token operator", children: "-" }), _jsx(_components.span, { className: "token number", children: "700" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n ", _jsx(_components.span, { className: "token punctuation", children: "}" }), "\n", _jsx(_components.span, { className: "token punctuation", children: "}" }), "\n"] }) }), "\n", _jsx(_components.p, { children: "and we add it to our class." }), "\n", _jsx(_components.pre, { className: "language-javascript", children: _jsxs(_components.code, { className: "language-javascript", children: [_jsx(_components.span, { className: "token operator", children: "<" }), "div ", _jsx(_components.span, { className: "token keyword", children: "class" }), _jsx(_components.span, { className: "token operator", children: "=" }), _jsx(_components.span, { className: "token string", children: "\"align-item rounded-md overflow-hidden shadow-md\"" }), _jsx(_components.span, { className: "token operator", children: ">" }), "\n"] }) }), "\n", _jsx(_components.p, { children: "So our first code will be as follows." }), "\n", _jsx(_components.pre, { className: "language-javascript", children: _jsxs(_components.code, { className: "language-javascript", children: [_jsx(_components.span, { className: "token operator", children: "<" }), "div className", _jsx(_components.span, { className: "token operator", children: "=" }), _jsx(_components.span, { className: "token string", children: "\"container mx-auto mt-8 p-4\"" }), _jsx(_components.span, { className: "token operator", children: ">" }), "\n ", _jsx(_components.span, { className: "token operator", children: "<" }), "div className", _jsx(_components.span, { className: "token operator", children: "=" }), _jsx(_components.span, { className: "token string", children: "\"align-item rounded-md overflow-hidden shadow-md\"" }), _jsx(_components.span, { className: "token operator", children: ">" }), "\n ", _jsx(_components.span, { className: "token operator", children: "<" }), "img\n className", _jsx(_components.span, { className: "token operator", children: "=" }), _jsx(_components.span, { className: "token string", children: "\"w-full h-48 object-cover\"" }), "\n src", _jsx(_components.span, { className: "token operator", children: "=" }), _jsx(_components.span, { className: "token string", children: "\"https://source.unsplash.com/800x600/?cat\"" }), "\n alt", _jsx(_components.span, { className: "token operator", children: "=" }), _jsx(_components.span, { className: "token string", children: "\"Kedi Resmi\"" }), "\n ", _jsx(_components.span, { className: "token operator", children: "/" }), _jsx(_components.span, { className: "token operator", children: ">" }), "\n ", _jsx(_components.span, { className: "token operator", children: "<" }), "div className", _jsx(_components.span, { className: "token operator", children: "=" }), _jsx(_components.span, { className: "token string", children: "\"p-4\"" }), _jsx(_components.span, { className: "token operator", children: ">" }), "\n ", _jsx(_components.span, { className: "token operator", children: "<" }), "h1 className", _jsx(_components.span, { className: "token operator", children: "=" }), _jsx(_components.span, { className: "token string", children: "\"text-2xl font-bold mb-2 text-gray-50\"" }), _jsx(_components.span, { className: "token operator", children: ">" }), _jsx(_components.span, { className: "token maybe-class-name", children: "Cute" }), " cat ", _jsx(_components.span, { className: "token operator", children: "<" }), _jsx(_components.span, { className: "token operator", children: "/" }), "h1", _jsx(_components.span, { className: "token operator", children: ">" }), "\n ", _jsx(_components.span, { className: "token operator", children: "<" }), "p className", _jsx(_components.span, { className: "token operator", children: "=" }), _jsx(_components.span, { className: "token string", children: "\"text-slate-300\"" }), _jsx(_components.span, { className: "token operator", children: ">" }), "\n ", _jsx(_components.span, { className: "token maybe-class-name", children: "Lorem" }), " ipsum dolor sit amet", _jsx(_components.span, { className: "token punctuation", children: "," }), " consectetur adipiscing elit", _jsx(_components.span, { className: "token punctuation", children: "." }), " ", _jsx(_components.span, { className: "token property-access", children: _jsx(_components.span, { className: "token maybe-class-name", children: "Nulla" }) }), " quam\n velit", _jsx(_components.span, { className: "token punctuation", children: "," }), " vulputate eu pharetra nec", _jsx(_components.span, { className: "token punctuation", children: "," }), " mattis ac neque", _jsx(_components.span, { className: "token punctuation", children: "." }), "\n ", _jsx(_components.span, { className: "token operator", children: "<" }), _jsx(_components.span, { className: "token operator", children: "/" }), "p", _jsx(_components.span, { className: "token operator", children: ">" }), "\n ", _jsx(_components.span, { className: "token operator", children: "<" }), "div className", _jsx(_components.span, { className: "token operator", children: "=" }), _jsx(_components.span, { className: "token string", children: "\"mt-4\"" }), _jsx(_components.span, { className: "token operator", children: ">" }), "\n ", _jsx(_components.span, { className: "token operator", children: "<" }), "span className", _jsx(_components.span, { className: "token operator", children: "=" }), _jsx(_components.span, { className: "token string", children: "\"text-sm text-gray-400\"" }), _jsx(_components.span, { className: "token operator", children: ">" }), "\n ", _jsx(_components.span, { className: "token literal-property property", children: "Category" }), _jsx(_components.span, { className: "token operator", children: ":" }), "\n ", _jsx(_components.span, { className: "token operator", children: "<" }), "a href", _jsx(_components.span, { className: "token operator", children: "=" }), _jsx(_components.span, { className: "token string", children: "\"#\"" }), " className", _jsx(_components.span, { className: "token operator", children: "=" }), _jsx(_components.span, { className: "token string", children: "\"text-amber-300\"" }), _jsx(_components.span, { className: "token operator", children: ">" }), "\n ", _jsx(_components.span, { className: "token maybe-class-name", children: "Animals" }), "\n ", _jsx(_components.span, { className: "token operator", children: "<" }), _jsx(_components.span, { className: "token operator", children: "/" }), "a", _jsx(_components.span, { className: "token operator", children: ">" }), "\n ", _jsx(_components.span, { className: "token operator", children: "<" }), _jsx(_components.span, { className: "token operator", children: "/" }), "span", _jsx(_components.span, { className: "token operator", children: ">" }), "\n ", _jsx(_components.span, { className: "token operator", children: "<" }), _jsx(_components.span, { className: "token operator", children: "/" }), "div", _jsx(_components.span, { className: "token operator", children: ">" }), "\n ", _jsx(_components.span, { className: "token operator", children: "<" }), _jsx(_components.span, { className: "token operator", children: "/" }), "div", _jsx(_components.span, { className: "token operator", children: ">" }), "\n ", _jsx(_components.span, { className: "token operator", children: "<" }), _jsx(_components.span, { className: "token operator", children: "/" }), "div", _jsx(_components.span, { className: "token operator", children: ">" }), "\n", _jsx(_components.span, { className: "token operator", children: "<" }), _jsx(_components.span, { className: "token operator", children: "/" }), "div", _jsx(_components.span, { className: "token operator", children: ">" }), "\n"] }) }), "\n", _jsx(_components.p, { children: "And as a result, our code will perform the same operation." }), "\n", _jsx(_components.p, { children: "Happy coding." })] }); } function MDXContent(props = {}) { const {wrapper: MDXLayout} = { ..._provideComponents(), ...props.components }; return MDXLayout ? _jsx(MDXLayout, { ...props, children: _jsx(_createMdxContent, { ...props }) }) : _createMdxContent(props); } return { default: MDXContent };