{"componentChunkName":"component---src-templates-blog-js","path":"/blog/how-to-use-tailwind-css-padding-margin-and-border-in-your-project/","result":{"data":{"site":{"siteMetadata":{"title":"Resources to help developers | Contrast | Devwares"}},"mdx":{"id":"1c91edac-45d7-5cba-b813-49440257a4a0","excerpt":"In web development, effectively utilizing spacing and borders is crucial for creating visually appealing and well-structured layouts. Tailwind CSS, a popular…","body":"var _excluded = [\"components\"];\nfunction _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }\nfunction _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], t.indexOf(o) >= 0 || {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }\nfunction _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (e.indexOf(n) >= 0) continue; t[n] = r[n]; } return t; }\n/* @jsxRuntime classic */\n/* @jsx mdx */\n\nvar _frontmatter = {\n \"title\": \"How to use tailwind css padding, margin and border in your project.\",\n \"lastUpdated\": \"7 May 2024\",\n \"date\": \"2021-01-10T02:16:04+01:00\",\n \"metaTitle\": \"How to use tailwind css padding, margin and border in your project\",\n \"metaDescription\": \"In this tutorial, we will explore how to use Tailwind CSS padding, margin, and border utilities to enhance the design of your project.\",\n \"type\": \"blog\",\n \"author\": \"Emmanuel Chinonso\",\n \"role\": \"Web Developer/Technical Writer\",\n \"authorImage\": \"/blog/author/author_emmanuel.jpg\",\n \"image\": \"./_/images/how-to-use-tailwind-css-padding-margin-border.png\",\n \"tags\": [\"javascript\", \"Programming\", \"Tailwind css\"],\n \"previousTitle\": \"How To Use Tailwind CSS In React\",\n \"previousPath\": \"how-to-use-tailwind-css-in-react\",\n \"nextTitle\": \"How to use the Tailwind CSS JIT CDN\",\n \"nextPath\": \"how-to-use-the-tailwind-css-JIT-CDN\",\n \"blogtype\": \"tailwindcss\",\n \"canonicalUrl\": \"https://windframe.dev/blog/how-to-use-tailwind-css-padding-margin-and-border-in-your-project\"\n};\nvar layoutProps = {\n _frontmatter: _frontmatter\n};\nvar MDXLayout = \"wrapper\";\nreturn function MDXContent(_ref) {\n var components = _ref.components,\n props = _objectWithoutProperties(_ref, _excluded);\n return mdx(MDXLayout, _extends({}, layoutProps, props, {\n components: components,\n mdxType: \"MDXLayout\"\n }), mdx(\"p\", null, \"In web development, effectively utilizing spacing and borders is crucial for creating visually appealing and well-structured layouts. Tailwind CSS, a popular utility-first CSS framework, provides a wide range of classes that allow you to easily apply \", mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"https://windframe.dev/classes/padding/p-10\"\n }, \"padding\"), \", \", mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"https://windframe.dev/classes/margin/m-10\"\n }, \"margin\"), \", and \", mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"https://windframe.dev/classes/border-width/border-2\"\n }, \"border\"), \" styles to your elements. In this tutorial, we will explore how to use Tailwind CSS padding, margin, and border utilities to enhance the design of your project.\"), mdx(\"h2\", null, \"Table of content\"), mdx(\"ul\", null, mdx(\"li\", {\n parentName: \"ul\"\n }, \"Introduction\"), mdx(\"li\", {\n parentName: \"ul\"\n }, \"Tailwind Padding\"), mdx(\"li\", {\n parentName: \"ul\"\n }, \"Tailwind Padding Classes\"), mdx(\"li\", {\n parentName: \"ul\"\n }, \"How to apply Tailwind padding\"), mdx(\"li\", {\n parentName: \"ul\"\n }, \"Building a project with Tailwind padding\"), mdx(\"li\", {\n parentName: \"ul\"\n }, \"Tailwind CSS Margin\"), mdx(\"li\", {\n parentName: \"ul\"\n }, \"Tailwind Margin Classes\"), mdx(\"li\", {\n parentName: \"ul\"\n }, \"How to apply Tailwind Margin\"), mdx(\"li\", {\n parentName: \"ul\"\n }, \"Building a project with Tailwind Margin\"), mdx(\"li\", {\n parentName: \"ul\"\n }, \"Tailwind CSS Border\"), mdx(\"li\", {\n parentName: \"ul\"\n }, \"Tailwind Border Classes\"), mdx(\"li\", {\n parentName: \"ul\"\n }, \"How to apply Tailwind Border\"), mdx(\"li\", {\n parentName: \"ul\"\n }, \"Tailwind Border Width\"), mdx(\"li\", {\n parentName: \"ul\"\n }, \"Tailwind Border Color\"), mdx(\"li\", {\n parentName: \"ul\"\n }, \"Tailwind Border Radius\"), mdx(\"li\", {\n parentName: \"ul\"\n }, \"Tailwind Border Style\"), mdx(\"li\", {\n parentName: \"ul\"\n }, \"Conclusion\"), mdx(\"li\", {\n parentName: \"ul\"\n }, \"Resources\")), mdx(\"h2\", null, \"Introduction\"), mdx(\"p\", null, \"Before diving into the specifics of using padding, margin, and border utilities in Tailwind CSS, it's important to understand the concepts behind these CSS properties.\"), mdx(\"ul\", null, mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"strong\", {\n parentName: \"li\"\n }, \"Padding\"), \": Padding is the space between the content of an element and its border. It affects the internal spacing of an element.\"), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"strong\", {\n parentName: \"li\"\n }, \"Margin\"), \": Margin is the space outside an element, between the element and other elements on the page. It affects the external spacing of an element.\"), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"strong\", {\n parentName: \"li\"\n }, \"Border\"), \": Border is the line that surrounds an element and separates it from other elements. It can have various styles, colors, and widths.\")), mdx(\"p\", null, \"Now that we have a basic understanding, let's explore how to use these utilities in Tailwind CSS.\"), mdx(\"h1\", null, \"Tailwind Padding\"), mdx(\"p\", null, \"The \", mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"https://www.devwares.com/tailwindcss/classes/tailwind-padding/\"\n }, \"Tailwind padding\"), \" utilities add padding to any element.\\nThe next thing we will be wondering is when we can use the Tailwind padding property. You can use it in the following ways.\"), mdx(\"ul\", null, mdx(\"li\", {\n parentName: \"ul\"\n }, \"When you don\\u2019t want your content to touch the edges of the container\"), mdx(\"li\", {\n parentName: \"ul\"\n }, \"When you want to increase a content block\\u2019s size without making the content itself bigger\"), mdx(\"li\", {\n parentName: \"ul\"\n }, \"When you need space between an inner element and the parent box\"), mdx(\"li\", {\n parentName: \"ul\"\n }, \"When you want the background of the element to display in the produced gap\")), mdx(\"h3\", null, \"Tailwind Padding Classes\"), mdx(\"p\", null, \"Here are some commonly used Tailwind CSS classes for padding:\"), mdx(\"ul\", null, mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"inlineCode\", {\n parentName: \"li\"\n }, \"p-{size}\"), \": Applies padding to all sides of an element. Replace \", mdx(\"inlineCode\", {\n parentName: \"li\"\n }, \"{size}\"), \" with a valid size value such as \", mdx(\"inlineCode\", {\n parentName: \"li\"\n }, \"0\"), \" (no padding), \", mdx(\"inlineCode\", {\n parentName: \"li\"\n }, \"2\"), \" (small padding), \", mdx(\"inlineCode\", {\n parentName: \"li\"\n }, \"4\"), \" (medium padding), \", mdx(\"inlineCode\", {\n parentName: \"li\"\n }, \"8\"), \" (large padding), etc.\"), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"a\", {\n parentName: \"li\",\n \"href\": \"\"\n }, mdx(\"inlineCode\", {\n parentName: \"a\"\n }, \"pt-{size}\")), \": Applies padding to the top side of an element.\"), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"inlineCode\", {\n parentName: \"li\"\n }, \"pr-{size}\"), \": Applies padding to the right side of an element.\"), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"inlineCode\", {\n parentName: \"li\"\n }, \"pb-{size}\"), \": Applies padding to the bottom side of an element.\"), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"inlineCode\", {\n parentName: \"li\"\n }, \"pl-{size}\"), \": Applies padding to the left side of an element.\"), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"a\", {\n parentName: \"li\",\n \"href\": \"https://windframe.dev/classes/padding/px-2\"\n }, mdx(\"inlineCode\", {\n parentName: \"a\"\n }, \"px-{size}\")), \": Applies padding to the left and right sides of an element.\"), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"a\", {\n parentName: \"li\",\n \"href\": \"https://windframe.dev/classes/padding/py-10\"\n }, mdx(\"inlineCode\", {\n parentName: \"a\"\n }, \"py-{size}\")), \": Applies padding to the top and bottom sides of an element.\")), mdx(\"h2\", null, \"How to apply Tailwind padding\"), mdx(\"p\", null, \"Adding \", mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"https://windframe.dev/tailwind/classes/tailwind-padding\"\n }, \"Tailwind padding\"), \" to your Project is not as hard as you may think. All you have to do is to add the classes to the element that you wish to control its space and you are done. You can see an example below.\"), mdx(\"pre\", null, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-html\"\n }, \"\\n\")), mdx(\"p\", null, \"By utilizing Tailwind CSS's padding classes, you can easily control the spacing within your elements.\"), mdx(\"h2\", null, \"Building a project with Tailwind padding\"), mdx(\"p\", null, \"We are going to build a text element. It will be represented in block form, and we can see the effect of Tailwind padding on these blocks. If you don't know how to set up tailwind on your project, check out this post \", mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"/blog/how-to-use-the-tailwind-css-JIT-CDN\"\n }, \"How to use the Tailwind CSS JIT CDN\"), \".\"), mdx(\"pre\", null, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-html\"\n }, \"pt-10
\\npb-10
\\npl-10
\\npl-10
\\n\")), mdx(\"p\", null, \"The project should look like the image below.\"), mdx(\"div\", {\n className: \"rounded-t-xl overflow-hidden bg-blue-100 p-10 \"\n }, mdx(\"div\", {\n className: \"mt-2 flex gap-12\"\n }, mdx(\"div\", {\n className: \"py-4 bg-blue-200 w-24 h-24 pt-10\"\n }, mdx(\"div\", {\n className: \"h-16 w-24 rounded-md bg-blue-500 text-white flex items-center justify-center font-extrabold \"\n }, \"pt-10\")), mdx(\"div\", {\n className: \" bg-blue-200 w-24 h-24\"\n }, mdx(\"div\", {\n className: \"h-16 w-24 rounded-md bg-blue-500 text-white flex items-center justify-center font-extrabold \"\n }, \"pb-10\")), mdx(\"div\", {\n className: \" bg-blue-200 w-24 h-24\"\n }, mdx(\"div\", {\n className: \"h-16 w-24 rounded-md bg-blue-500 text-white flex items-center justify-center font-extrabold relative right-10\"\n }, \"pr-10\")), mdx(\"div\", {\n className: \" bg-blue-200 w-24 h-24 pl-10\"\n }, mdx(\"div\", {\n className: \"h-16 w-24 rounded-md bg-blue-500 text-white flex items-center justify-center font-extrabold mr-10\"\n }, \"pl-10\")))), mdx(\"h2\", null, \"Tailwind CSS Margin\"), mdx(\"p\", null, \"Similar to padding, \", mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"https://windframe.dev/tailwind/classes/tailwind-margin\"\n }, \"Tailwind margin\"), \" utilities allow you to add margin to elements. Margin classes are used to create spacing between elements on a page.\"), mdx(\"p\", null, \"The Tailwind margin property can be used in the following ways\"), mdx(\"ul\", null, mdx(\"li\", {\n parentName: \"ul\"\n }, \"When you need space around elements, such as separating a photo and words describing it\"), mdx(\"li\", {\n parentName: \"ul\"\n }, \"When you want to center an element horizontally\"), mdx(\"li\", {\n parentName: \"ul\"\n }, \"When you want to overlap elements\"), mdx(\"li\", {\n parentName: \"ul\"\n }, \"When you want to move an element up, down, or side to side.\")), mdx(\"h3\", null, \"Tailwind Margin Classes\"), mdx(\"p\", null, \"Here are some commonly used Tailwind CSS classes for margin:\"), mdx(\"ul\", null, mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"a\", {\n parentName: \"li\",\n \"href\": \"https://windframe.dev/classes/margin/m-16\"\n }, mdx(\"inlineCode\", {\n parentName: \"a\"\n }, \"m-{size}\")), \": Applies margin to all sides of an element. Replace \", mdx(\"inlineCode\", {\n parentName: \"li\"\n }, \"{size}\"), \" with a valid size value such as \", mdx(\"inlineCode\", {\n parentName: \"li\"\n }, \"0\"), \" (no margin), \", mdx(\"inlineCode\", {\n parentName: \"li\"\n }, \"2\"), \" (small margin), \", mdx(\"inlineCode\", {\n parentName: \"li\"\n }, \"4\"), \" (medium margin), \", mdx(\"inlineCode\", {\n parentName: \"li\"\n }, \"8\"), \" (large margin), etc.\"), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"a\", {\n parentName: \"li\",\n \"href\": \"https://windframe.dev/classes/margin/mt-3\"\n }, mdx(\"inlineCode\", {\n parentName: \"a\"\n }, \"mt-{size}\")), \": Applies margin to the top side of an element.\"), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"inlineCode\", {\n parentName: \"li\"\n }, \"mr-{size}\"), \": Applies margin to the right side of an element.\"), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"a\", {\n parentName: \"li\",\n \"href\": \"https://windframe.dev/classes/margin/mb-4\"\n }, mdx(\"inlineCode\", {\n parentName: \"a\"\n }, \"mb-{size}\")), \": Applies margin to the bottom side of an element.\"), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"a\", {\n parentName: \"li\",\n \"href\": \"https://windframe.dev/classes/margin/ml-2.5\"\n }, mdx(\"inlineCode\", {\n parentName: \"a\"\n }, \"ml-{size}\")), \": Applies margin to the left side of an element.\"), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"a\", {\n parentName: \"li\",\n \"href\": \"https://windframe.dev/classes/margin/mx-1\"\n }, mdx(\"inlineCode\", {\n parentName: \"a\"\n }, \"mx-{size}\")), \": Applies margin to the left and right sides of an element.\"), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"a\", {\n parentName: \"li\",\n \"href\": \"https://windframe.dev/classes/margin/my-2\"\n }, mdx(\"inlineCode\", {\n parentName: \"a\"\n }, \"my-{size}\")), \": Applies margin to the top and bottom sides of an element.\")), mdx(\"h2\", null, \"How to apply Tailwind Margin\"), mdx(\"p\", null, \"To apply margin to an element using Tailwind CSS, add the appropriate margin classes to the element's HTML class attribute. For example:\"), mdx(\"pre\", null, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-html\"\n }, \"\\n This element has a margin of 4 units on all sides.\\n
\\n\")), mdx(\"h2\", null, \"Building a project with Tailwind Margin\"), mdx(\"p\", null, \"The tailwind margin class controls the margin of any element. This simply controls the positioning of an element. You can see examples of adding a Tailwind margin on the project below.\"), mdx(\"pre\", null, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-html\"\n }, \"mt-4
\\nmr-4
\\nmb-4
\\nml-4
\\n\")), mdx(\"p\", null, \"The project we created will look like the image below.\"), mdx(\"div\", {\n className: \"relative font-mono text-sm font-bold leading-6 h-56 bg-blue-50\"\n }, mdx(\"div\", {\n className: \"absolute top-0 left-1/2 -translate-x-1/2 md:-ml-24\"\n }, mdx(\"div\", {\n className: \"flow-root bg-blue-200 rounded-b-lg text-white font-extrabold\"\n }, mdx(\"div\", {\n className: \"bg-blue-500 rounded-lg shadow-lg p-4 mt-4\"\n }, \"mt-4\"))), mdx(\"div\", {\n className: \"absolute right-0 top-1/2 -translate-y-1/2\"\n }, mdx(\"div\", {\n className: \"flow-root bg-blue-200 rounded-b-lg text-white font-extrabold\"\n }, mdx(\"div\", {\n className: \"flex-none bg-blue-500 rounded-lg shadow-lg p-4 mr-4\"\n }, \"mr-4\"))), mdx(\"div\", {\n className: \"absolute bottom-0 left-1/2 -translate-x-1/2 md:ml-24\"\n }, mdx(\"div\", {\n className: \"flow-root bg-blue-200 rounded-b-lg text-white font-extrabold\"\n }, mdx(\"div\", {\n className: \"bg-blue-500 rounded-lg shadow-lg p-4 mb-4\"\n }, \" mb-4\"))), mdx(\"div\", {\n className: \"absolute left-0 top-1/2 -translate-y-1/2\"\n }, mdx(\"div\", {\n className: \"flow-root bg-blue-200 rounded-r-lg text-white font-extrabold\"\n }, mdx(\"div\", {\n className: \"flex-none bg-blue-500 rounded-lg shadow-lg p-4 ml-4\"\n }, \" ml-4\")))), mdx(\"p\", null, \"By utilizing Tailwind CSS's margin classes, you can easily control the spacing between elements on your page.\"), mdx(\"h2\", null, \"Tailwind CSS Border\"), mdx(\"p\", null, \"Tailwind CSS provides a wide range of classes to apply borders to elements. You can control the style, color, and width of borders using these classes.\"), mdx(\"p\", null, \"You add \", mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"https://windframe.dev/tailwind/classes/tailwind-border-collapse\"\n }, \"Tailwind border\"), \" classes to make your border spacing visible on an HTML block-level element. This classes can be either for a border width, border color or border radius.\"), mdx(\"h2\", null, \"Tailwind Border Classes\"), mdx(\"p\", null, \"Here are some commonly used Tailwind CSS classes for borders:\"), mdx(\"ul\", null, mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"inlineCode\", {\n parentName: \"li\"\n }, \"border\"), \": Applies a default border to an element.\"), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"inlineCode\", {\n parentName: \"li\"\n }, \"border-{size}\"), \": Applies a border of a specific width to an element. Replace \", mdx(\"inlineCode\", {\n parentName: \"li\"\n }, \"{size}\"), \" with a valid size value such as \", mdx(\"inlineCode\", {\n parentName: \"li\"\n }, \"0\"), \" (no border), \", mdx(\"inlineCode\", {\n parentName: \"li\"\n }, \"2\"), \" (thin border), \", mdx(\"inlineCode\", {\n parentName: \"li\"\n }, \"4\"), \" (medium border), \", mdx(\"inlineCode\", {\n parentName: \"li\"\n }, \"8\"), \" (thick border), etc.\"), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"inlineCode\", {\n parentName: \"li\"\n }, \"border-solid\"), \": Applies a solid border style to an element.\"), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"inlineCode\", {\n parentName: \"li\"\n }, \"border-dashed\"), \": Applies a dashed border style to an element.\"), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"inlineCode\", {\n parentName: \"li\"\n }, \"border-dotted\"), \": Applies a dotted border style to an element.\"), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"inlineCode\", {\n parentName: \"li\"\n }, \"border-none\"), \": Removes the border from an element.\"), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"inlineCode\", {\n parentName: \"li\"\n }, \"border-{color}\"), \": Applies a border of a specific color to an element. Replace \", mdx(\"inlineCode\", {\n parentName: \"li\"\n }, \"{color}\"), \" with a valid color value such as \", mdx(\"inlineCode\", {\n parentName: \"li\"\n }, \"gray\"), \", \", mdx(\"inlineCode\", {\n parentName: \"li\"\n }, \"blue\"), \", \", mdx(\"inlineCode\", {\n parentName: \"li\"\n }, \"green\"), \", etc.\")), mdx(\"h2\", null, \"How to apply Tailwind Border\"), mdx(\"p\", null, \"To apply borders to an element using Tailwind CSS, add the appropriate border classes to the element's HTML class attribute.\"), mdx(\"h2\", null, \"Tailwind Border Width\"), mdx(\"p\", null, \"Tailwind CSS provides a series of utility classes. By using \", mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"https://windframe.dev/classes/border-width/border-0\"\n }, mdx(\"inlineCode\", {\n parentName: \"a\"\n }, \"border-{width}\")), \", where \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"{width}\"), \" is a numeric value, you can easily set the border thickness according to your design preferences. For instance, \", mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"https://windframe.dev/classes/border-width/border-4\"\n }, mdx(\"inlineCode\", {\n parentName: \"a\"\n }, \"border-4\")), \" will result in a \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"4px\"), \" border. You can use the \", mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"https://windframe.dev/tailwind/classes/tailwind-border-width\"\n }, \"Tailwind border width\"), \" to control all sides of an element.\"), mdx(\"pre\", null, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-html\"\n }, \"\\n
Border
\\n
Border-2
\\n
Border-4
\\n
Border-8
\\n
\\n
Border-color
\\n
Border-color
\\n
Border-color
\\n
Border-color
\\n
Rounded
\\nRounded-md
\\nRounded-xl
\\nRounded-full
\\n\")), mdx(\"p\", null, \"The code above shows the Tailwind Border radius class.\"), mdx(\"div\", {\n className: \"flex flex-col sm:flex-row items-center justify-around gap-4 text-white text-sm text-center font-bold leading-6\"\n }, mdx(\"div\", {\n className: \"flex flex-col items-center shrink-0\"\n }, mdx(\"p\", {\n className: \"font-medium text-sm text-slate-500 font-mono text-center mb-3\"\n }, \"Rounded\"), mdx(\"div\", {\n className: \"p-4 shadow-sm bg-indigo-500 w-16 h-16 rounded\"\n })), mdx(\"div\", {\n className: \"flex flex-col items-center shrink-0\"\n }, mdx(\"p\", {\n className: \"font-medium text-sm text-slate-500 font-mono text-center mb-3\"\n }, \"Rounded-md\"), mdx(\"div\", {\n className: \"p-4 shadow-sm bg-indigo-500 w-16 h-16 rounded-md\"\n })), mdx(\"div\", {\n className: \"flex flex-col items-center shrink-0\"\n }, mdx(\"p\", {\n className: \"font-medium text-sm text-slate-500 font-mono text-center mb-3\"\n }, \"Rounded-xl\"), mdx(\"div\", {\n className: \"p-4 shadow-sm bg-indigo-500 w-16 h-16 rounded-xl\"\n })), mdx(\"div\", {\n className: \"flex flex-col items-center shrink-0\"\n }, mdx(\"p\", {\n className: \"font-medium text-sm text-slate-500 font-mono text-center mb-3\"\n }, \"Rounded-full\"), mdx(\"div\", {\n className: \"p-4 shadow-sm bg-indigo-500 w-16 h-16 rounded-full\"\n }))), mdx(\"h2\", null, \"Tailwind Border Style\"), mdx(\"p\", null, \"The \", mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"https://windframe.dev/tailwind/classes/tailwind-border-style\"\n }, \"Tailwind border style\"), \" utility is essential especially if you want to make a jaw-dropping design on your application.\"), mdx(\"p\", null, \"There are many classes available to use here. This utility simply allows you to style your border elements. Some of these classes include \", mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"https://windframe.dev/classes/border-style/border-solid\"\n }, mdx(\"inlineCode\", {\n parentName: \"a\"\n }, \"border-solid\")), \", \", mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"https://windframe.dev/classes/border-style/border-dotted\"\n }, mdx(\"inlineCode\", {\n parentName: \"a\"\n }, \"border-dotted\")), \", \", mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"https://windframe.dev/classes/border-style/border-double\"\n }, mdx(\"inlineCode\", {\n parentName: \"a\"\n }, \"border-double\")), \", \", mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"https://windframe.dev/classes/border-style/border-dashed\"\n }, mdx(\"inlineCode\", {\n parentName: \"a\"\n }, \"border-dashed\")), \" etc.\"), mdx(\"pre\", null, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-html\"\n }, \"Solid
\\nDashed
\\nDotted
\\nDouble
\\nHidden
\\nNone
\\n\")), mdx(\"h2\", null, \"Preview\"), mdx(\"div\", {\n className: \"rounded-t-xl overflow-hidden pt-20 pb-4 bg-gray-100\"\n }, mdx(\"div\", {\n className: \"flex items-center align-center justify-evenly mt-3\"\n }, mdx(\"div\", {\n className: \"w-24 h-24 border-4 border-solid shadow-md shadow-gray-500 border-indigo-500 bg-indigo-100 text-center text-base text-indigo-700 flex items-center justify-center font-bold\"\n }, \"Solid\"), mdx(\"div\", {\n className: \"w-24 h-24 border-4 border-dashed border-indigo-600 bg-indigo-100 flex items-center justify-center text-indigo-700 text-base font-bold shadow-md shadow-gray-500\"\n }, \"Dashed\"), mdx(\"div\", {\n className: \"w-24 h-24 border-4 border-dotted border-indigo-600 bg-indigo-100 text-indigo-700 flex items-center justify-center text-base font-bold shadow-md shadow-gray-500 \"\n }, \"Dotted\"), mdx(\"div\", {\n className: \"w-24 h-24 border-4 border-double border-indigo-600 bg-indigo-100 flex items-center justify-center text-base text-indigo-700 font-bold shadow-md shadow-gray-500 \"\n }, \"Double\"), mdx(\"div\", {\n className: \"w-24 h-24 border-4 border-hidden border-indigo-600 bg-indigo-100 text-indigo-700 flex items-center justify-center text-base font-bold shadow-md shadow-gray-500 \"\n }, \"Hidden\"), mdx(\"div\", {\n className: \"w-24 h-24 border-4 border-none border-indigo-600 bg-indigo-100 flex items-center justify-center text-base text-indigo-700 font-bold shadow-md shadow-gray-500 \"\n }, \"None\"))), mdx(\"h2\", null, \"Conclusion\"), mdx(\"p\", null, \"In this tutorial, we explored how to use Tailwind CSS padding, margin, and border utilities to enhance the design of your project. We learned about the different padding, margin, and border classes provided by Tailwind CSS and how to apply them to elements. By leveraging these utilities, you can easily control spacing and create visually appealing layouts. Remember to experiment and combine these utilities with other Tailwind CSS classes to achieve the desired design for your project.\"), mdx(\"h2\", null, \"Resources\"), mdx(\"ul\", null, mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"a\", {\n parentName: \"li\",\n \"href\": \"https://github.com/Bit-Han/Tailwind-pro\"\n }, \"Link to the Github Code\")), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"a\", {\n parentName: \"li\",\n \"href\": \"https://tailwindui.com/pricing\"\n }, \"Get TailwindCSS PRO\")), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"a\", {\n parentName: \"li\",\n \"href\": \"https://tailwindcss.com/docs/padding\"\n }, \"Link to Tailwind CSS docs\")), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"a\", {\n parentName: \"li\",\n \"href\": \"/blog/tailwind-3.0-is-finally-out\"\n }, \"tailwind 3.0 is finally out\")), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"a\", {\n parentName: \"li\",\n \"href\": \"/blog/how-to-use-tailwind-css-in-react\"\n }, \"how-to-use-tailwind-css-in-react\")), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"a\", {\n parentName: \"li\",\n \"href\": \"/blog/how-to-install-tailwind-css-in-vuejs\"\n }, \"how-to-install-tailwind-css-in-vuejs\"))));\n}\n;\nMDXContent.isMDXComponent = true;","frontmatter":{"title":"How to use tailwind css padding, margin and border in your project.","date":"January 10, 2021","image":{"childImageSharp":{"fluid":{"base64":"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAALCAIAAADwazoUAAAACXBIWXMAAAsTAAALEwEAmpwYAAACjklEQVQoz2O4e+3M2+e3586YuGHdyh/fPvz//31KX8eB/XtW3brtsGKj59otHmtAyHPNFtdVm8M27brx7v3FV29PPXvpvmYLw/v75/9/fDitu+HIvi3//376////jKkTDu7fDWS0nThrt3y999qtQJ2ea7e6r94cuH77lTdv33z/ceL5S6eVGxlev3724+vbaZO6uzvbrl0+///f1+kTu/fu2QHU/OTzl4ANO1xXbQLa6bp6s9vqzXbLN1QcOnH46fPM3YdAml/eOfv7/YP5Uzs5OTgMVOQuH9o5a+bUHTu3/geDuqOnfddty9xzKGbr3thte6O37gndtMt8yVqXVZuBzmF4+/jql1d3OhtKrEwNgoyVdk9pmtTTtnvHpv//fwM1L7pyPWjjjsbjZ4oPHC/af6zk4PH6Y2eA+p1XbQL5+cmj2y+e3CwvyooO9Y2315lXl9dSV7F963qI5uWXrwKV1h49VX34VOnB4yk795cfOpGz93DCjn1AFzH8fn3zy/ObibHRdlbWNbFeidFhLm5eN29c/v/v+4/PH6YePxWxdU/l4ZNAnRWHTxbsP5q19xCQnbv3CEjzxO7m6PBgTRVFWytzRzsrQwN9PT39+vr6y1ev7Nq5LXXtpujt+ysPn8jee7js4IlqsClx2/e5AJ29ejODqbGhnKSosoKskry0sryMurKCprKcmpZedWN736zp7is2hG/Znbf3cNy2vcAQzt5zKH//0cCNO4A6QQFmoK4kJy2hKCOpICupKCetqignIy0RF+yfn5Xn2trtuWm3OzCqQPG0xQ0cW8BogyQbIGIoTI8W4ueVlRSTlhCVkRRTlJUSFRaoK8mbfPCg48pNnpDkBUknEARLc0AEAN1rf2CBUEuJAAAAAElFTkSuQmCC","aspectRatio":1.7730496453900708,"src":"/static/8784f9c387e8549d5c7bedb64491611b/a4bdf/how-to-use-tailwind-css-padding-margin-border.png","srcSet":"/static/8784f9c387e8549d5c7bedb64491611b/84249/how-to-use-tailwind-css-padding-margin-border.png 250w,\n/static/8784f9c387e8549d5c7bedb64491611b/a4bdf/how-to-use-tailwind-css-padding-margin-border.png 384w","sizes":"(max-width: 384px) 100vw, 384px"}}},"imageExternal":null,"lastUpdated":"7 May 2024","author":"Emmanuel Chinonso","role":"Web Developer/Technical Writer","authorImage":"/blog/author/author_emmanuel.jpg","metaTitle":"How to use tailwind css padding, margin and border in your project","metaDescription":"In this tutorial, we will explore how to use Tailwind CSS padding, margin, and border utilities to enhance the design of your project.","previousTitle":"How To Use Tailwind CSS In React","previousPath":"how-to-use-tailwind-css-in-react","nextTitle":"How to use the Tailwind CSS JIT CDN","nextPath":"how-to-use-the-tailwind-css-JIT-CDN","blogtype":"tailwindcss"},"fields":{"slug":"/how-to-use-tailwind-css-padding-margin-and-border-in-your-project/"}},"previous":null,"next":null},"pageContext":{"id":"1c91edac-45d7-5cba-b813-49440257a4a0"}},"staticQueryHashes":["2619113677","2619113677","2619113677","2619113677","2619113677","2619113677","3309287076","3706406642","3706406642","4045616534","4045616534","956403285","956403285"]}