BCMS Logo
\n \n \n

\n Hello world!\n

\n \n\n```\n\nEach installation method has its own benefits, and the best choice depends on how complex your project is. For beginners or simple projects, the Tailwind CLI or Play CDN are great starting points. For larger applications, using PostCSS or following specific guides for frameworks gives you more control and flexibility.\n\n## Tailwind Basics: Utility-First in Action\n\nThe main idea of Tailwind CSS is simple: instead of creating a lot of custom styles in a separate CSS file, you use pre-defined class names right in your HTML. These classes are like small building blocks that you can mix and match to put together your layout and design.\n\nLet’s look at some real examples to make it clearer:\n\n### Spacing\n\nIn Tailwind, spacing refers to padding p and margin m. You use these to create space either inside or outside of your elements.\n\n[Padding](https://tailwindcss.com/docs/padding) is the space inside an element.\n\n- p-4: Adds padding on all sides (top, right, bottom, left).\n- pt-4: Adds padding to the top.\n- pb-4: Adds padding to the bottom.\n- pl-4: Adds padding to the left.\n- pr-4: Adds padding to the right.\n- px-4: Adds padding to the left and right.\n- py-4: Adds padding to the top and bottom.\n\n[Margin](https://tailwindcss.com/docs/margin) is the space outside an element.\n\n- m-4: Adds margin on all sides.\n- mt-4: Adds margin to the top.\n- mb-4: Adds margin to the bottom.\n- ml-4: Adds margin to the left.\n- mr-4: Adds margin to the right.\n- mx-4: Adds margin to the left and right.\n- my-4: Adds margin to the top and bottom.\n\nThe number (like 4) shows how much space is added. It's part of Tailwind's spacing scale:\n\n1 = 0.25rem (about 4px)\n\n2 = 0.5rem (about 8px)\n\n4 = 1rem (about 16px)\n\n8 = 2rem (about 32px)\n\nIt continues like that. So, when you see p-4, it means there's 1rem (16px) of padding all around.\n\nExample:\n\n```\nimport React from 'react'\nconst page = () => {\n return (\n
\n I have padding inside and margin on top\n
\n )\n}\nexport default page\n\n```\n\n![](https://app.thebcms.com/api/v3/org/620528baca65b6578d29868d/instance/670e90c0cedcf9e4d34d1a23/media/684ac88073612ce0411c4510/bin2/1%2C.png?apiKey=670e90c0cedcf9e4d34d24e7.a2132a1499ac4abf17c3c3183070d09975292fb5fe5c0f15d2d8c9288171554b)\n\n```\nimport React from 'react'\nconst page = () => {\n return (\n
\n I have padding inside and margin on top\n
\n )\n}\nexport default page\n\n```\n\nIncreasing the spacing in p-10 and mt-10 will look like this:\n\n![](https://app.thebcms.com/api/v3/org/620528baca65b6578d29868d/instance/670e90c0cedcf9e4d34d1a23/media/684ac88173612ce0411c4511/bin2/2..png?apiKey=670e90c0cedcf9e4d34d24e7.a2132a1499ac4abf17c3c3183070d09975292fb5fe5c0f15d2d8c9288171554b)\n\nIn Tailwind CSS, the classes gap-* and space-x-* / space-y-* are used to create space between elements. This is different from padding and margin, which are used to create space inside or outside of elements.\n\ngap-*: This class is used in grid or flex layouts to manage the space between rows and columns.\n\nExample:\n\n```\nimport React from \"react\";\nconst page = () => {\n return (\n
\n
Box 1
\n
Box 2
\n
\n );\n};\nexport default page;\n\n```\n\nThis adds a space of 1rem (16px) between the columns.\n\n![](https://app.thebcms.com/api/v3/org/620528baca65b6578d29868d/instance/670e90c0cedcf9e4d34d1a23/media/684ac88273612ce0411c4512/bin2/3.png?apiKey=670e90c0cedcf9e4d34d24e7.a2132a1499ac4abf17c3c3183070d09975292fb5fe5c0f15d2d8c9288171554b)\n\nYou can also use gap-x-4 to add space only between columns or gap-y-4 to add space only between rows.\n\nspace-x-* and space-y-*: These classes add space between child elements, but they do not add space before the first element or after the last one. They only work in a flex container. They aren't made to deal with complicated situations like grids, layouts that wrap around, or cases where the items are shown in a special order instead of the regular order in the document.\n\nExample:\n\n```\nimport React from \"react\";\nconst page = () => {\n return (\n
\n
Item 1
\n
Item 2
\n
Item 3
\n
Item 4
\n
Item 4
\n
\n );\n};\nexport default page;\n\n```\n\n![](https://app.thebcms.com/api/v3/org/620528baca65b6578d29868d/instance/670e90c0cedcf9e4d34d1a23/media/684ac88373612ce0411c4513/bin2/4.png?apiKey=670e90c0cedcf9e4d34d24e7.a2132a1499ac4abf17c3c3183070d09975292fb5fe5c0f15d2d8c9288171554b)\n\nThis adds 1rem (16px) of space between each item horizontally, with no space before the first item or after the last one. The same concept applies to space-y-*, but it works for vertical spacing when items are stacked in a column.\n\n### Typography\n\nTailwind makes it super easy to style your text.\n\nFont size:\n\n- text-sm, text-lg, text-xl, text-3xl: These control how big the text is.\n\nFont weight:\n\n- font-normal, font-bold, font-semibold: These determine how thick the text appears.\n\nLine height:\n\n- leading-snug, leading-relaxed: These control the space between lines of text.\n\nLetter spacing:\n\n- tracking-tight, tracking-wider: These control the space between letters.\n\nExample:\n\n```\n

\n This is a bold heading\n

\n```\n\n![](https://app.thebcms.com/api/v3/org/620528baca65b6578d29868d/instance/670e90c0cedcf9e4d34d1a23/media/684ac88473612ce0411c4514/bin2/5..png?apiKey=670e90c0cedcf9e4d34d24e7.a2132a1499ac4abf17c3c3183070d09975292fb5fe5c0f15d2d8c9288171554b)\n\n```\nimport React from \"react\";\nconst page = () => {\n return (\n
\n

\n This is a normal text\n

\n
\n );\n};\nexport default page;\n\n```\n\n![](https://app.thebcms.com/api/v3/org/620528baca65b6578d29868d/instance/670e90c0cedcf9e4d34d1a23/media/684ac88673612ce0411c4515/bin2/6.png?apiKey=670e90c0cedcf9e4d34d24e7.a2132a1499ac4abf17c3c3183070d09975292fb5fe5c0f15d2d8c9288171554b)\n\n### Layout\n\nTailwind provides tools for arranging items quickly.\n\nFlex:\n\n- flex: Turns an element into a flex container.\n- justify-center: Centers items horizontally.\n- items-center: Centers items vertically.\n- justify-between: Creates space between items.\n\nGrid:\n\n- grid, grid-cols-2, grid-cols-3: Use CSS grid and set the number of columns.\n- gap-4: Adds space between items in the grid.\n\nExample (Flex layout):\n\n```\n
\n
Logo
\n \n
\n\n```\n\n![](https://app.thebcms.com/api/v3/org/620528baca65b6578d29868d/instance/670e90c0cedcf9e4d34d1a23/media/684ac88773612ce0411c4516/bin2/7..png?apiKey=670e90c0cedcf9e4d34d24e7.a2132a1499ac4abf17c3c3183070d09975292fb5fe5c0f15d2d8c9288171554b)\n\nExample (Grid layout):\n\n```\nimport React from \"react\";\nconst page = () => {\n return (\n
\n
Item 1
\n
Item 2
\n
Item 1
\n
Item 2
\n
Item 1
\n
Item 2
\n
\n );\n};\nexport default page;\n\n```\n\n![](https://app.thebcms.com/api/v3/org/620528baca65b6578d29868d/instance/670e90c0cedcf9e4d34d1a23/media/684ac88873612ce0411c4517/bin2/8..png?apiKey=670e90c0cedcf9e4d34d24e7.a2132a1499ac4abf17c3c3183070d09975292fb5fe5c0f15d2d8c9288171554b)\n\n### Colors\n\nTailwind uses a color system like blue-500, gray-200, red-700, etc.\n\nText color:\n\nThe numbers (50 to 950) indicate how light or dark the color is.\n\n- text-blue-500: Makes the text blue.\n- text-gray-900: Dark gray text.\n- text-white: White text.\n\nBackground color:\n\n- bg-blue-500: Turns the background blue.\n- bg-yellow-100: Light yellow background.\n- bg-black: Black background.\n\nExample:\n\n```\nimport React from \"react\";\nconst page = () => {\n return (\n

\n Green text on a light green background\n

\n );\n};\nexport default page;\n\n```\n\n![](https://app.thebcms.com/api/v3/org/620528baca65b6578d29868d/instance/670e90c0cedcf9e4d34d1a23/media/684ac88973612ce0411c4518/bin2/9.png?apiKey=670e90c0cedcf9e4d34d24e7.a2132a1499ac4abf17c3c3183070d09975292fb5fe5c0f15d2d8c9288171554b)\n\n### Buttons and Cards with Hover/Focus States\n\nTailwind allows you to easily add hover and focus styles.\n\n- hover:bg-blue-600: Changes the background to a darker blue when hovered.\n- hover:scale-105: Makes the element slightly bigger on hover.\n- focus:outline-none: Removes the default focus ring.\n- focus:ring-2: Shows a custom focus ring.\n\nExample: Button\n\n```\n\n\n```\n\n{\"file\":{\"_id\":\"684ac8a673612ce0411c4529\",\"type\":\"VID\",\"mimetype\":\"video/quicktime\",\"alt_text\":\"\",\"caption\":\"\",\"name\":\"Screen Recording 2025-06-06 at 11.59.15.mov\",\"width\":904,\"height\":226,\"size\":89668,\"src\":\"/blog/Zero-to-Hero Tailwind CSS Tutorial: Build Modern Websites Like a Pro/Screen Recording 2025-06-06 at 11.59.15.mov\",\"sizeTransforms\":null,\"version\":\"2\",\"url\":\"https://app.thebcms.com/api/v3/instance/670e90c0cedcf9e4d34d1a23/media/684ac8a673612ce0411c4529/bin2/Screen Recording 2025-06-06 at 11.59.15.mov\"},\"autoplay\":true,\"youtube_url\":null}\n\nExample: Card\n\n```\n
\n

Card Title

\n

Some info inside the card.

\n
\n\n```\n\n### Simple Landing Section\n\nLet’s combine all we’ve talked about earlier to create a simple centered landing section:\n\n```\nimport React from \"react\";\nconst page = () => {\n return (\n <>\n
\n \n
\n
\n
\n

Welcome to Tailwind

\n

Build modern websites faster with utility-first CSS.

\n \n
\n
\n\n );\n};\nexport default page;\n\n```\n\n![](https://app.thebcms.com/api/v3/org/620528baca65b6578d29868d/instance/670e90c0cedcf9e4d34d1a23/media/684ac88a73612ce0411c4519/bin2/10.png?apiKey=670e90c0cedcf9e4d34d24e7.a2132a1499ac4abf17c3c3183070d09975292fb5fe5c0f15d2d8c9288171554b)\n\n## Tailwind CSS tutorial tips\n\nWorking with Tailwind CSS becomes easier and more efficient when you use some helpful tools and develop good habits. These tips will help you write cleaner code, manage it better, and speed up your work especially as your project gets bigger.\n\n### Use @apply for Repeated Styles\n\nWhen you use Tailwind, you might find yourself writing the same set of classes multiple times. For example:\n\n```\n\n```\n\nIf you need that same button style in five or more places, it can be a hassle to repeat or change it later.\n\nInstead, you can use @apply in a custom CSS file:\n\n```\n/* styles.css */\n.btn {\n @apply bg-blue-600 text-white px-4 py-2 rounded hover:bg-blue-700;\n}\n```\n\nThen, in your HTML or JSX, you can write:\n\n```\n\n```\n\nThis keeps your code DRY (Don’t Repeat Yourself) and makes it easier to update things.\n\n### Use Component Libraries (Like Tailwind UI or DaisyUI)\n\nIf you don’t want to create everything from scratch, you can speed up your work by using UI libraries that are built on Tailwind:\n\n- [Tailwind Plus](https://tailwindui.com/): Made by the creators of Tailwind, it offers premium, well-designed components like navbars, modals, and cards.\n\n![](https://app.thebcms.com/api/v3/org/620528baca65b6578d29868d/instance/670e90c0cedcf9e4d34d1a23/media/684ac88c73612ce0411c451a/bin2/11.png?apiKey=670e90c0cedcf9e4d34d24e7.a2132a1499ac4abf17c3c3183070d09975292fb5fe5c0f15d2d8c9288171554b)\n\n- [DaisyUI](https://daisyui.com/): This is free and open-source. It provides pre-built components and themes that you can use just by adding a class like btn or card\n\n![](https://app.thebcms.com/api/v3/org/620528baca65b6578d29868d/instance/670e90c0cedcf9e4d34d1a23/media/684ac88e73612ce0411c451b/bin2/12.png?apiKey=670e90c0cedcf9e4d34d24e7.a2132a1499ac4abf17c3c3183070d09975292fb5fe5c0f15d2d8c9288171554b)\n\nThese libraries are great if you’re in a hurry or want a uniform look throughout your project.\n\n### Install Tailwind IntelliSense Extension\n\nTailwind CSS has thousands of utility classes, and it can be tough to remember them all. The Tailwind IntelliSense extension for VS Code provides autocomplete suggestions as you type, class name previews showing exact styles and error highlighting if you make a mistake. It works in your JSX, HTML, and even in string templates. This will help you type faster and make fewer errors. You can find it in the VS Code Marketplace.\n\n![](https://app.thebcms.com/api/v3/org/620528baca65b6578d29868d/instance/670e90c0cedcf9e4d34d1a23/media/684ac89173612ce0411c451c/bin2/13.png?apiKey=670e90c0cedcf9e4d34d24e7.a2132a1499ac4abf17c3c3183070d09975292fb5fe5c0f15d2d8c9288171554b)\n\n### Use prettier-plugin-tailwindcss to Keep Classes Ordered\n\nAs you add more utility classes, your class attributes can get messy and hard to read:\n\n```\n
\n```\n\nThe prettier-plugin-tailwindcss automatically sorts your classes in a logical order whenever you save your file. It organizes them into categories like layout, spacing, colors, and typography based on the Tailwind configuration.\n\nThis keeps your code neat and makes it easier to read at a glance.\n\nTo use it:\n\n1. Install Prettier in your project.\n2. Install the plugin:\n\n```\nnpm install -D prettier prettier-plugin-tailwindcss\n\n```\n\nNow, Prettier will automatically sort your Tailwind classes. By using these tools and tips together, your Tailwind workflow will be smoother, especially for larger projects. You’ll write better code, save time, and stay organized!\n\n## Common Mistakes to Avoid When Using Tailwind CSS\n\nEven though Tailwind is pretty easy to learn, there are some common mistakes that many people, especially beginners, make. If you avoid these mistakes early on, you’ll save yourself some stress and your code will be cleaner and easier to manage later.\n\n### Overusing Utility Classes (When to Create Components)\n\nTailwind encourages you to use utility classes, but if you keep repeating the same long list of classes everywhere, your code can get messy.\n\nBad example:\n\n```\n\n\n```\n\nIf you notice this happening a lot, consider creating a reusable component or using @apply to group the classes together.\n\nBetter example:\n\n```\n/* styles.css */\n.btn-primary \n @apply bg-blue-600 text-white px-4 py-2 rounded hover:bg-blue-700;\n}\n```\n\nNow you can just use:\n\n```\n\n```\n\nThis way, your code stays cleaner and is easier to manage.\n\n### Not Customizing the Config (tailwind.config.js)\n\nBy default, Tailwind has its own set of colors, font sizes, and spacing, but you can change these to fit your own style. Many people forget that you can (and should) customize these settings.\n\nFor example:\n\n```\n// tailwind.config.js\nmodule.exports = {\n theme: {\n extend: {\n colors: {\n brand: '#1E40AF',\n },\n },\n },\n};\n\n```\n\nNow you can use bg-brand instead of typing out hex codes everywhere. Taking time to customize your settings makes your design more consistent and your classes easier to read.\n\n### Ignoring Responsive Design\n\nTailwind makes it really easy to create responsive layouts using breakpoints like sm:, md:, lg:, etc. However, beginners often forget to use them, which can cause their sites to look bad on smaller screens.\n\nNOVI CODE SNIPPET\n\nBad example:\n\n```\n
\n \n
\n\n```\n\nBetter example: \n\n```\n
\n \n
\n```\n\nAlways remember to test your layout on mobile, tablet, and desktop sizes.\n\n### Forgetting Accessibility (ARIA, alt, Semantic HTML)\n\nTailwind helps you build quickly, but it’s still your responsibility to make sure your site is usable for everyone, including people who use screen readers. Common things people often overlook include:\n\n- Using semantic tags like 
,
,
\n \n
\n );\n}\n\n```\n\n![](https://app.thebcms.com/api/v3/org/620528baca65b6578d29868d/instance/670e90c0cedcf9e4d34d1a23/media/684ac8a573612ce0411c4528/bin2/25.png?apiKey=670e90c0cedcf9e4d34d24e7.a2132a1499ac4abf17c3c3183070d09975292fb5fe5c0f15d2d8c9288171554b)\n\n### Advanced Layouts\n\nTailwind is great for complex layouts using utility classes—no custom CSS is needed.\n\n1. Full-Page Layout with Sticky Header:\n\n```\n\n
\n \n
\n
\n \n
\n \n\n\n```\n\nHere, sticky top-0 keeps the header at the top, and flex-grow makes the main content fill the available space.\n\n1. CSS Grid + Tailwind for Responsive Dashboards:\n\n```\n
\n \n
\n
\n
Widget 1
\n
Widget 2
\n
\n
Main Content Area
\n
\n
\n\n```\n\nIn this example, grid-cols-1 lg:grid-cols-4 shows a single column on mobile but four columns on desktop. lg:col-span-3 allows the main section to take up three columns.\n\n1. Split Screens or Masonry-Style Grids:\n\nSplit Hero:\n\n```\n
\n
\n

Left Side

\n
\n
\n

Right Side Content

\n
\n
\n\n```\n\nMasonry (CSS columns):\n\n```\n
\n
\n \n

Caption

\n
\n \n
\n\n```\n\nThis uses CSS columns for a Pinterest-like layout, and Tailwind’s columns-*utilities handle the breakpoints. Now, to use what you’ve learnt in the Tailwind tutorial, let’s create a blog page using BCMS starter and styling with Tailwind CSS. Set it up using the [BCMS doc](https://thebcms.com/docs/integrations/next-js) and paste this code to import your content:\n\n```\nimport { bcms } from \"@/bcms\";\nimport { BlogEntry } from \"../../bcms/types/ts\";\nimport { BCMSContentManager, BCMSImage } from \"@thebcms/components-react\";\nexport default async function Home() {\n const blogs = (await bcms.entry.getAll(\"blog\")) as BlogEntry[];\n return (\n
\n
\n {blogs.map((blog, blogIdx) => {\n if (!blog.meta.en || !blog.content.en) {\n return \"\";\n }\n return (\n
\n

{blog.meta.en.title}

\n \n \n
\n );\n })}\n
\n
\n );\n}\n```\n\n## Conclusion\n\nIn this guide, you learned how Tailwind CSS can really improve your frontend workflow, especially when used with a CMS like BCMS. We started with the basics, like how to install Tailwind and the main idea behind its utility-first approach. Then, we explored how to customize it, create reusable components, manage dark mode, add animations, and even design complex layouts like blogs and portfolios.\n\n[BCMS](https://thebcms.com/docs) allows you to organize your content in any way you like. It’s quick, adaptable, and easy for developers to use. When you combine it with Tailwind, you get an excellent setup for creating websites and apps that are powered by a CMS, load quickly, and have a modern look.\n\n{\"which_call_to_action_to_use\":{\"_id\":\"670e90c0cedcf9e4d34d1b97\",\"createdAt\":1716891624198,\"updatedAt\":1716891624198,\"instanceId\":\"670e90c0cedcf9e4d34d1a23\",\"templateId\":\"670e90c0cedcf9e4d34d1a2d\",\"templateName\":\"call_to_action\",\"userId\":\"6203d9e9b84228703e097ac4\",\"statuses\":[],\"meta\":{\"en\":{\"title\":\"Start using BCMS in a minute\",\"slug\":\"start-using-bcms-in-a-minute\",\"link_text\":\"Create your account\",\"link_url\":\"https://cloud.thebcms.com/sign-up\"}},\"content\":{\"en\":[{\"type\":\"bulletList\",\"value\":\"\"}]}}}","url":"https://thebcms.com/blog/tailwind-css-tutorial"}

Zero-to-hero Tailwind CSS tutorial: Build modern websites like a pro

Tailwind CSS tutorial.jpeg
By James Oluwaleye
Read time 15 min
Posted on 25 Feb 2026

CSS frameworks help make designing websites easier by providing pre-made classes, so you don’t have to write all your CSS from scratch. One popular framework is Tailwind CSS. Instead of offering complete components, it gives you small utility classes that correspond directly to regular CSS rules. For example, instead of adding padding by writing padding: 1rem in your CSS file, you can simply use p-4 in your HTML code.

If you want to make the text larger, you can use text-xl, which adjusts the font size to 1.25rem (about 20px). If you need a blue background, you can use bg-blue-500 to get a nice blue color without worrying about hex codes. This allows you to create whole designs directly in your HTML, so you don’t have to keep switching between your HTML and CSS files.

Core Concepts of Tailwind

Before we jump into coding, let’s go over the three main ideas behind Tailwind:

Utility-First

Tailwind gives you a lot of small CSS classes (called utilities) that each do one specific thing, like setting padding, margin, font size, color, and position. You build your layout and style by combining these utilities directly in your HTM and here is why it’s powerful:

  • You don’t need to create a separate CSS file for each part of your design.

  • The styles are right next to the HTML, so you can easily see how each element is styled.

  • Tailwind’s JIT (Just-In-Time) engine only creates the CSS you actually use, which keeps file sizes small.

Responsive Design

By default, all utilities work for all screen sizes. If you want to target larger screens, you can use prefixes like sm:, md:, lg:, xl:, and 2xl:. For example:

<div class="text-base md:text-xl lg:text-2xl">
  Resize the screen to see font size change.
</div>

In the code above, text-base applies on mobile while md:text-xl applies on medium screens (≥768px) and lg:text-2xl applies on large screens (≥1024px).

Customization

Tailwind offers a default theme with colors, spacing, fonts, and more, but you can change or add to it. You can add new colors, set custom spacing, or enable plugins for things like forms, typography, and animations.

The tailwind.config.js file is where you can change Tailwind’s standard design settings. It allows you to add new styles or change the existing ones, such as colors, spacing, and fonts. You also use this file to set up plugins and specify which files Tailwind needs to look at for class names. For example, adding a custom color, your tailwind.config.js would look like:

// tailwind.config.js
module.exports = {
  content: ["./src/**/*.{html,js,jsx,ts,tsx}"],
  theme: {
    extend: {
      colors: {
        brandBlue: "#1e40af",
      },
    },
  },
  plugins: [],
};

You can now use the custom brandBlue color like this:

<div class="bg-brandBlue text-white p-4">Hello!</div>

Tailwind CSS Tutorial: Getting Started

Tailwind CSS has several ways to install it, making it easy to use for different projects and developer preferences. Here’s a look at the most common methods:

Tailwind CLI

The Tailwind CLI is the easiest way to start, especially for small projects or quick prototypes. It doesn’t need any extra build tools.

  • Install Tailwind CSS

npm install tailwindcss @tailwindcss/cli

  • Add the @import "tailwindcss"; import to your main CSS file.

/* src/input.css */ 
@import "tailwindcss";

  • Use the command line tool to check your source files for classes and create your CSS.

npx @tailwindcss/cli -i ./src/input.css -o ./src/output.css --watch

  • Then, include your compiled CSS file in the <head> section of your HTML, and begin using Tailwind’s utility classes to style your content.

<link href="./dist/output.css" rel="stylesheet">

Using PostCSS

For more complicated projects, you can combine Tailwind CSS with PostCSS. This allows for better customization and helps your project grow.

  • Install Tailwind CSS

npm install tailwindcss @tailwindcss/postcss postcss

  • Add Tailwind to your PostCSS configuration

// postcss.config.mjs
export default {
  plugins: {
    "@tailwindcss/postcss": {},
  }
}

  • Add an @import statement to your CSS file to include Tailwind CSS. Then, start your build process by running npm run dev or use whichever command is set up in your package.json file.

Framework Guides

Tailwind CSS has official guides for working with popular frameworks like Next.js, Astro, Angular, and SvelteKit. These guides give step-by-step instructions to help you set up Tailwind CSS for each framework.

For example, if you’re using Next.js, you can follow the guide to set up Tailwind CSS in your project easily. First, you need to create a new Next.js project if you haven't already done so. The easiest way to do this is by using Create Next App.

npx create-next-app@latest my-project --typescript --eslint --app
cd my-project

This will prompt a series of questions and you need to select yes to the Tailwind CSS which will automatically set up the configurations and you can check the files like globals.css to check if the default @import "tailwindcss"; is there.

Play CDN

If you want to quickly try things out or if you’re working on a small project, you can use Tailwind’s Play CDN. This method doesn’t need any installation or extra steps. However, it’s not the best choice for bigger projects because it doesn’t allow customization and might include styles you don’t need.

<!doctype html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
  </head>
  <body>
    <h1 class="text-3xl font-bold underline">
      Hello world!
    </h1>
  </body>
</html>

Each installation method has its own benefits, and the best choice depends on how complex your project is. For beginners or simple projects, the Tailwind CLI or Play CDN are great starting points. For larger applications, using PostCSS or following specific guides for frameworks gives you more control and flexibility.

Tailwind Basics: Utility-First in Action

The main idea of Tailwind CSS is simple: instead of creating a lot of custom styles in a separate CSS file, you use pre-defined class names right in your HTML. These classes are like small building blocks that you can mix and match to put together your layout and design.

Let’s look at some real examples to make it clearer:

Spacing

In Tailwind, spacing refers to padding p and margin m. You use these to create space either inside or outside of your elements.

Padding is the space inside an element.

  • p-4: Adds padding on all sides (top, right, bottom, left).

  • pt-4: Adds padding to the top.

  • pb-4: Adds padding to the bottom.

  • pl-4: Adds padding to the left.

  • pr-4: Adds padding to the right.

  • px-4: Adds padding to the left and right.

  • py-4: Adds padding to the top and bottom.

Margin is the space outside an element.

  • m-4: Adds margin on all sides.

  • mt-4: Adds margin to the top.

  • mb-4: Adds margin to the bottom.

  • ml-4: Adds margin to the left.

  • mr-4: Adds margin to the right.

  • mx-4: Adds margin to the left and right.

  • my-4: Adds margin to the top and bottom.

The number (like 4) shows how much space is added. It's part of Tailwind's spacing scale:

1 = 0.25rem (about 4px)

2 = 0.5rem (about 8px)

4 = 1rem (about 16px)

8 = 2rem (about 32px)

It continues like that. So, when you see p-4, it means there's 1rem (16px) of padding all around.

Example:

import React from 'react'
const page = () => {
  return (
    <div className="bg-blue-500 p-4 mt-6">
    I have padding inside and margin on top
    </div>
  )
}
export default page
1,.png
import React from 'react'
const page = () => {
  return (
    <div className="bg-blue-500 p-10 mt-10">
    I have padding inside and margin on top
    </div>
  )
}
export default page

Increasing the spacing in p-10 and mt-10 will look like this:

2..png

In Tailwind CSS, the classes gap-* and space-x-* / space-y-* are used to create space between elements. This is different from padding and margin, which are used to create space inside or outside of elements.

gap-*: This class is used in grid or flex layouts to manage the space between rows and columns.

Example:

import React from "react";
const page = () => {
  return (
    <div className="grid grid-cols-2 gap-4 mt-10">
      <div className="bg-red-200 p-4">Box 1</div>
      <div className="bg-blue-200 p-4">Box 2</div>
    </div>
  );
};
export default page;

This adds a space of 1rem (16px) between the columns.

3.png

You can also use gap-x-4 to add space only between columns or gap-y-4 to add space only between rows.

space-x-* and space-y-*: These classes add space between child elements, but they do not add space before the first element or after the last one. They only work in a flex container.

They aren't made to deal with complicated situations like grids, layouts that wrap around, or cases where the items are shown in a special order instead of the regular order in the document.

Example:

import React from "react";
const page = () => {
  return (
    <div className="flex space-x-4 my-10">
      <div className="bg-red-200">Item 1</div>
      <div className="bg-blue-200">Item 2</div>
      <div className="bg-green-200">Item 3</div>
      <div className="bg-yellow-200">Item 4</div>
      <div className="bg-indigo-200">Item 4</div>
    </div>
  );
};
export default page;
4.png

This adds 1rem (16px) of space between each item horizontally, with no space before the first item or after the last one. The same concept applies to space-y-*, but it works for vertical spacing when items are stacked in a column.

Typography

Tailwind makes it super easy to style your text.

Font size:

  • text-sm, text-lg, text-xl, text-3xl: These control how big the text is.

Font weight:

  • font-normal, font-bold, font-semibold: These determine how thick the text appears.

Line height:

  • leading-snug, leading-relaxed: These control the space between lines of text.

Letter spacing:

  • tracking-tight, tracking-wider: These control the space between letters.

Example:

<h1 class="text-2xl font-bold leading-snug tracking-wide">
  This is a bold heading
</h1>
5..png
import React from "react";
const page = () => {
  return (
    <div className="flex space-x-4 my-10 px-10">
      <p className="text-base font-normal leading-relaxed tracking-tight">
        This is a normal text
      </p>
    </div>
  );
};
export default page;
6.png

Layout

Tailwind provides tools for arranging items quickly.

Flex:

  • flex: Turns an element into a flex container.

  • justify-center: Centers items horizontally.

  • items-center: Centers items vertically.

  • justify-between: Creates space between items.

Grid:

  • grid, grid-cols-2, grid-cols-3: Use CSS grid and set the number of columns.

  • gap-4: Adds space between items in the grid.

Example (Flex layout):

<div class="flex justify-between items-center p-4 bg-gray-50 px-40">
  <div class="font-semibold">Logo</div>
  <nav>
    <a>Home</a>
    <a>About</a>
    <a>Contact</a>
  </nav>
</div>
7..png

Example (Grid layout):

import React from "react";
const page = () => {
  return (
    <div className="grid grid-cols-2 gap-4">
      <div className="bg-blue-400">Item 1</div>
      <div className="bg-amber-400">Item 2</div>
      <div className="bg-blue-400">Item 1</div>
      <div className="bg-amber-400">Item 2</div>
      <div className="bg-blue-400">Item 1</div>
      <div className="bg-amber-400">Item 2</div>
    </div>
  );
};
export default page;
8..png

Colors

Tailwind uses a color system like blue-500, gray-200, red-700, etc.

Text color:

The numbers (50 to 950) indicate how light or dark the color is.

  • text-blue-500: Makes the text blue.

  • text-gray-900: Dark gray text.

  • text-white: White text.

Background color:

  • bg-blue-500: Turns the background blue.

  • bg-yellow-100: Light yellow background.

  • bg-black: Black background.

Example:

import React from "react";
const page = () => {
  return (
    <p className="text-green-600 text-2xl p-6 bg-green-100">
      Green text on a light green background
    </p>
  );
};
export default page;
9.png

Buttons and Cards with Hover/Focus States

Tailwind allows you to easily add hover and focus styles.

  • hover:bg-blue-600: Changes the background to a darker blue when hovered.

  • hover:scale-105: Makes the element slightly bigger on hover.

  • focus:outline-none: Removes the default focus ring.

  • focus:ring-2: Shows a custom focus ring.

Example: Button

<button class="bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-600 focus:ring-2">
  Click Me
</button>

Example: Card

<div class="p-6 bg-white rounded shadow-md hover:shadow-lg">
  <h2 class="text-xl font-bold">Card Title</h2>
  <p class="text-gray-600">Some info inside the card.</p>
</div>

Simple Landing Section

Let’s combine all we’ve talked about earlier to create a simple centered landing section:

import React from "react";
const page = () => {
  return (
  <>
<header className="bg-white shadow-md px-6 py-4">
  <nav className="flex items-center justify-between max-w-6xl mx-auto">
    <div className="text-xl font-bold text-blue-600">Logo</div>
    <ul className="flex space-x-6 text-gray-700">
      <li><a href="#" className="hover:text-blue-600">Home</a></li>
      <li><a href="#" className="hover:text-blue-600">Features</a></li>
      <li><a href="#" className="hover:text-blue-600">Pricing</a></li>
      <li><a href="#" className="hover:text-blue-600">Contact</a></li>
    </ul>
  </nav>
</header>
<section className="h-[80vh] flex items-center justify-center bg-blue-500 px-4">
  <div className="text-center p-20 ">
    <h1 className="text-8xl font-bold mb-4 text-white">Welcome to Tailwind</h1>
    <p className="text-gray-200 mb-6">Build modern websites faster with utility-first CSS.</p>
    <button className="bg-white text-blue-400 px-6 py-3 rounded hover:bg-blue-700 focus:outline-none">
      Get Started
    </button>
  </div>
</section>
</>
  );
};
export default page;
10.png

Tailwind CSS tutorial tips

Working with Tailwind CSS becomes easier and more efficient when you use some helpful tools and develop good habits. These tips will help you write cleaner code, manage it better, and speed up your work especially as your project gets bigger.

Use @apply for Repeated Styles

When you use Tailwind, you might find yourself writing the same set of classes multiple times. For example:

<button class="bg-blue-600 text-white px-4 py-2 rounded hover:bg-blue-700">
  Click Me
</button>

If you need that same button style in five or more places, it can be a hassle to repeat or change it later.

Instead, you can use @apply in a custom CSS file:

/* styles.css */
.btn {
  @apply bg-blue-600 text-white px-4 py-2 rounded hover:bg-blue-700;
}

Then, in your HTML or JSX, you can write:

<button class="btn">Click Me</button>

This keeps your code DRY (Don’t Repeat Yourself) and makes it easier to update things.

Use Component Libraries (Like Tailwind UI or DaisyUI)

If you don’t want to create everything from scratch, you can speed up your work by using UI libraries that are built on Tailwind:

  • Tailwind Plus: Made by the creators of Tailwind, it offers premium, well-designed components like navbars, modals, and cards.

11.png

  • DaisyUI: This is free and open-source. It provides pre-built components and themes that you can use just by adding a class like btn or card

12.png

These libraries are great if you’re in a hurry or want a uniform look throughout your project.

Install Tailwind IntelliSense Extension

Tailwind CSS has thousands of utility classes, and it can be tough to remember them all. The Tailwind IntelliSense extension for VS Code provides autocomplete suggestions as you type, class name previews showing exact styles and error highlighting if you make a mistake. It works in your JSX, HTML, and even in string templates. This will help you type faster and make fewer errors. You can find it in the VS Code Marketplace.

13.png

Use prettier-plugin-tailwindcss to Keep Classes Ordered

As you add more utility classes, your class attributes can get messy and hard to read:

<div class="rounded bg-white shadow-md p-6 text-gray-700 border border-gray-200">

The prettier-plugin-tailwindcss automatically sorts your classes in a logical order whenever you save your file. It organizes them into categories like layout, spacing, colors, and typography based on the Tailwind configuration.

This keeps your code neat and makes it easier to read at a glance.

To use it:

  1. Install Prettier in your project.

  2. Install the plugin:

npm install -D prettier prettier-plugin-tailwindcss

Now, Prettier will automatically sort your Tailwind classes. By using these tools and tips together, your Tailwind workflow will be smoother, especially for larger projects. You’ll write better code, save time, and stay organized!

Common Mistakes to Avoid When Using Tailwind CSS

Even though Tailwind is pretty easy to learn, there are some common mistakes that many people, especially beginners, make. If you avoid these mistakes early on, you’ll save yourself some stress and your code will be cleaner and easier to manage later.

Overusing Utility Classes (When to Create Components)

Tailwind encourages you to use utility classes, but if you keep repeating the same long list of classes everywhere, your code can get messy.

Bad example:

<button class="bg-blue-600 text-white px-4 py-2 rounded hover:bg-blue-700">
  Save
</button>
<button class="bg-blue-600 text-white px-4 py-2 rounded hover:bg-blue-700">
  Submit
</button>

If you notice this happening a lot, consider creating a reusable component or using @apply to group the classes together.

Better example:

/* styles.css */
.btn-primary 
  @apply bg-blue-600 text-white px-4 py-2 rounded hover:bg-blue-700;
}

Now you can just use:

<button class="btn-primary">Save</button>

This way, your code stays cleaner and is easier to manage.

Not Customizing the Config (tailwind.config.js)

By default, Tailwind has its own set of colors, font sizes, and spacing, but you can change these to fit your own style. Many people forget that you can (and should) customize these settings.

For example:

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        brand: '#1E40AF',
      },
    },
  },
};

Now you can use bg-brand instead of typing out hex codes everywhere. Taking time to customize your settings makes your design more consistent and your classes easier to read.

Ignoring Responsive Design

Tailwind makes it really easy to create responsive layouts using breakpoints like sm:, md:, lg:, etc. However, beginners often forget to use them, which can cause their sites to look bad on smaller screens.

NOVI CODE SNIPPET

Bad example:

<div class="flex flex-row gap-8">
  <!-- always side by side, even on small screens -->
</div>

Better example: 

<div class="flex flex-col sm:flex-row gap-8">
  <!-- vertical on small screens, side by side on tablets and up -->
</div>

Always remember to test your layout on mobile, tablet, and desktop sizes.

Forgetting Accessibility (ARIA, alt, Semantic HTML)

Tailwind helps you build quickly, but it’s still your responsibility to make sure your site is usable for everyone, including people who use screen readers. Common things people often overlook include:

  • Using semantic tags like <header />, <main />, <nav />, <footer />

  • Adding alt="" to all images

  • Adding aria-* labels for screen readers

  • Using focus:outline-none carefully (don’t remove focus outlines without providing another way for users to see what they’re focused on)

Example of a bad practice:

<button class="focus:outline-none">
  <!-- Bad: no focus outline, user might not know it's focused -->
</button>

Instead, combine it with a visible ring:

<button class="focus:outline-none focus:ring-2 focus:ring-blue-500">
  <!-- Better: now users can see focus state -->
</button>

By being aware of these common mistakes, you’ll write better Tailwind code and create websites that are more maintainable, responsive, and user-friendly.

Building with the Tailwind CSS framework

Tailwind CSS is not just about using small classes. You can create complete parts of a website by putting these utilities together. Let's design smarter layouts that look more like actual websites.

Layouts and Navigation

We use Tailwind's flex and grid tools to ensure everything looks great on any screen size. For example, below is a full layout with a sticky sidebar and main content area and it resize on all screens.

Note: We try to stick to the DRY (Don't Repeat Yourself) principles, but in the examples below, you will see some utility classes repeated. This is done on purpose to make things easier to understand. In a real project, you can make your code cleaner and easier to manage by using Tailwind’s @apply directive or component classes to reuse styles.

import React from "react";
const page = () => {
  return (
    <>
      <div className="min-h-screen grid grid-cols-1 lg:grid-cols-[250px_1fr]">
        <aside className="bg-gray-800 text-white p-6 space-y-4">
          <div className="text-2xl font-bold">Dashboard</div>
          <nav className="space-y-2">
            <a href="#" className="block hover:text-blue-300">
              Overview
            </a>
            <a href="#" className="block hover:text-blue-300">
              Reports
            </a>
            <a href="#" className="block hover:text-blue-300">
              Settings
            </a>
          </nav>
        </aside>
        <main className="p-10 bg-gray-100">
          <h1 className="text-3xl font-bold mb-6">Welcome Back 👋</h1>
          <p className="text-gray-700 mb-4">Here’s what’s happening today.</p>
        </main>
      </div>
    </>
  );
};
export default page;
14.png

Page Structure and Containers

Here, you'll discover how to center your content and keep it within certain limits. You'll use classes like container, max-w-, mx-auto, and px- to make sure your text and images don't get too wide or too close to the edges.

import React from "react";
const page = () => {
  return (
    <>
      <section className="max-w-6xl mx-auto px-6 py-12">
        <div className="mb-12">
          <h2 className="text-4xl font-semibold text-center mb-2">About Our App</h2>
          <p className="text-gray-600 text-center text-lg">
            We help startups build faster with ready-made tools and templates.
          </p>
        </div>
        <div className="grid md:grid-cols-2 gap-3">
          <div>
            <h3 className="text-2xl font-semibold mb-2">Why Choose Us</h3>
            <ul className="list-disc pl-5 text-lg text-gray-700 space-y-1">
              <li>Built with performance in mind</li>
              <li>Responsive from day one</li>
              <li>Clean and scalable structure</li>
            </ul>
          </div>
          <div>
            <img
              src="https://i.natgeofe.com/k/a6c9f195-de20-445d-9d36-745ef56042c5/OG_Colosseum_Ancient-Rome_KIDS_1122.jpg"
              className="rounded-lg shadow"
            />
          </div>
        </div>
      </section>
    </>
  );
};
export default page;

max-w-6xl sets a maximum width for the <section>, so even on very wide screens, the content won’t go beyond a certain limit. In Tailwind’s default size scale, 6xl is about 72 rem (which is around 1152 pixels), making the lines of text easy to read while mx-auto adds automatic margins on the left and right sides (margin-left: auto; margin-right: auto;). When used with a max-width, it centers the section on the screen, ensuring that your content block is always in the middle of the page.

15.png

Creating a clean and responsive navigation bar is simple with Tailwind. You'll use flex, justify-between, space-x-*, and hover effects to design menus that work well on both mobile devices and desktops.

import React from "react";
const page = () => {
  return (
    <>
      <header className="bg-white shadow-md">
        <div className="max-w-7xl mx-auto px-6 py-6 flex items-center justify-between">
          <div className="text-3xl font-bold text-black">Logo</div>
          <nav className="hidden md:flex space-x-8 text-gray-700">
            <a href="#" className="hover:text-blue-600">
              Home
            </a>
            <a href="#" className="hover:text-blue-600">
              Features
            </a>
            <a href="#" className="hover:text-blue-600">
              Pricing
            </a>
            <a href="#" className="hover:text-blue-600">
              Contact
            </a>
          </nav>
          <div className="flex space-x-4">
             <button className="border-2 border-blue-400 px-4 py-2 rounded-xl ">
                Login
            </button>
            <button className="bg-blue-400 px-4 py-2 rounded-xl text-white">
              Sign up
            </button>
           
          </div>
        </div>
      </header>
    </>
  );
};
export default page;
16.png

Multi-Column Layouts

If you want a two-column blog layout or a three-column feature grid, Tailwind's grid-cols-* and gap-* classes allow you to easily switch from one column on mobile to multiple columns on larger screens with just one line of code.

import React from "react";
const page = () => {
  return (
    <>
      <section className="bg-gray-50 py-16">
        <div className="max-w-6xl mx-auto px-6">
          <h2 className="text-3xl font-bold text-center mb-12">Features</h2>
          <div className="grid md:grid-cols-3 gap-10">
            <div className="bg-white p-6 rounded-lg shadow hover:shadow-lg transition">
              <div className="text-blue-600 text-4xl mb-4">⚡</div>
              <h3 className="text-xl font-semibold mb-2">Fast Setup</h3>
              <p className="text-gray-600">
                Launch projects within minutes with our starter kits.
              </p>
            </div>
            <div className="bg-white p-6 rounded-lg shadow hover:shadow-lg transition">
              <div className="text-green-600 text-4xl mb-4">🔒</div>
              <h3 className="text-xl font-semibold mb-2">Secure</h3>
              <p className="text-gray-600">
                Security baked into the design from day one.
              </p>
            </div>
            <div className="bg-white p-6 rounded-lg shadow hover:shadow-lg transition">
              <div className="text-purple-600 text-4xl mb-4">📈</div>
              <h3 className="text-xl font-semibold mb-2">Scalable</h3>
              <p className="text-gray-600">
                Built to grow with your business needs.
              </p>
            </div>
          </div>
        </div>
      </section>
    </>
  );
};
export default page;
17.png

Forms

Forms like the rest are also an essential part of many applications. This is an example of how to style a form using Tailwind CSS.

import React from "react";
const page = () => {
  return (
    <>
      <form className="max-w-xl mx-auto bg-white  border border-black p-8 mt-20 rounded space-y-6">
        <div>
          <label className="block mb-1 font-medium">Full Name</label>
          <input
            type="text"
            className="w-full border  px-4 py-2 rounded focus:outline-none focus:ring-2 focus:ring-blue-400"
          />
        </div>
        <div>
          <label className="block mb-1 font-medium">Email</label>
          <input
            type="email"
            className="w-full border  px-4 py-2 rounded focus:outline-none focus:ring-2 focus:ring-blue-400"
          />
        </div>
        <div>
          <label className="block mb-1 font-medium">Message</label>
          <textarea
            className="w-full border  px-4 py-2 rounded focus:outline-none focus:ring-2 focus:ring-blue-400"
          ></textarea>
        </div>
        <button className="bg-blue-600 text-white px-6 py-2 rounded hover:bg-blue-700">
          Send
        </button>
      </form>
    </>
  );
};
export default page;
18.png

Data Tables

When you want to show data in rows and columns (like user lists or reports), Tailwind helps you easily add borders, striped rows, hover highlights, and action buttons, making your tables easy to read and interact with.

import React from "react";
const page = () => {
  return (
    <>
      <table className="min-w-full mt-10 table-auto border-collapse border border-black">
        <thead className="bg-blue-100 text-left text-sm text-gray-800">
          <tr>
            <th className="px-4 py-2 border border-black">Name</th>
            <th className="px-4 py-2 border border-black">Email</th>
            <th className="px-4 py-2 border border-black">Role</th>
            <th className="px-4 py-2 border border-black">Status</th>
          </tr>
        </thead>
        <tbody className="text-gray-800 text-sm">
          <tr className="hover:bg-blue-50">
            <td className="px-4 py-2 border border-black">Sarah Smith</td>
            <td className="px-4 py-2 border border-black">
              sarah.smith@example.com
            </td>
            <td className="px-4 py-2 border border-black">Administrator</td>
            <td className="px-4 py-2 border border-black">
              <span className="bg-green-200 text-green-800 px-2 py-1 rounded-full text-xs">
                Active
              </span>
            </td>
          </tr>
          <tr className="hover:bg-blue-50">
            <td className="px-4 py-2 border border-black">John Doe</td>
            <td className="px-4 py-2 border border-black">john.doe@example.com</td>
            <td className="px-4 py-2 border border-black">Editor</td>
            <td className="px-4 py-2 border border-black">
              <span className="bg-yellow-200 text-yellow-800 px-2 py-1 rounded-full text-xs">
                Pending
              </span>
            </td>
          </tr>
          <tr className="hover:bg-blue-50">
            <td className="px-4 py-2 border border-black">Emma Johnson</td>
            <td className="px-4 py-2 border border-black">
              emma.johnson@example.com
            </td>
            <td className="px-4 py-2 border border-black">Subscriber</td>
            <td className="px-4 py-2 border border-black">
              <span className="bg-red-200 text-red-800 px-2 py-1 rounded-full text-xs">
                Inactive
              </span>
            </td>
          </tr>
        </tbody>
      </table>
    </>
  );
};
export default page;

The <thead> element is used to group the header rows in a table, usually found at the top. The <tbody> element contains the main section of rows in a table. The <tr> element stands for a single row in the table. The <th> element creates a header cell within a row, which is usually bold and centered. The <td> element creates a regular data cell inside a row.

19.png

Cards

Cards combine an image, title, description, and button into one neat block. With Tailwind, you'll learn how to add shadows, rounded corners, and hover effects to make your cards stand out in any layout.

import React from "react";
const page = () => {
  return (
    <>
      <div className="max-w-md mt-10  mx-auto bg-white rounded-xl shadow-md overflow-hidden hover:shadow-lg transition">
        <img
          src="https://i.natgeofe.com/k/a6c9f195-de20-445d-9d36-745ef56042c5/OG_Colosseum_Ancient-Rome_KIDS_1122.jpg"
          className="w-full h-48 object-cover"
        />
        <div className="p-6">
          <h3 className="text-xl font-bold mb-2">Tailwind in Real Projects</h3>
          <p className="text-gray-600 mb-4">
            Tips on structuring and scaling Tailwind in larger applications.
          </p>
          <a href="#" className="text-blue-600 hover:underline">
            Read more
          </a>
        </div>
      </div>
    </>
  );
};
export default page;

shadow-md is for adding shadow to the box to give a different feel. rounded-xl gives the rounded shape to the card while hover:shadow-lg gives a different shadow feel on hover.

20.png

Learn Tailwind CSS responsive design

Tailwind uses a mobile-first approach, which means that the styles you create are designed for small screens first. You can then add changes for larger screens using simple prefixes. By default, any class without a screen prefix (like sm: or lg:) will work on all screen sizes, starting from the smallest. You can use sm:, md:, lg:, and xl: to change or add styles for those specific screen sizes. This way, your design looks good on phones first and then expands nicely for tablets and desktops.

Breakpoints

  • sm: applies at 640px and larger

  • md: applies at 768px and larger

  • lg: applies at 1024px and larger

  • xl: applies at 1280px and larger

  • 2xl: applies at 1536px and larger

You just add a prefix to any utility class. For example:

<!-- Small text by default, larger on md screens -->
<p class="text-base md:text-lg lg:text-xl">
  Responsive text size
</p>

Building Stacked-to-Grid Layouts

On mobile, you might want a single-column layout, while on larger screens, you can use a multi-column grid. Tailwind makes this easy:

<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
  <div class="bg-white p-4">Block 1</div>
  <div class="bg-white p-4">Block 2</div>
  <div class="bg-white p-4">Block 3</div>
</div>

Use grid-cols-1 for phones,  md:grid-cols-2 for tablets and lg:grid-cols-3 for desktops

Mobile Navigation Toggle Example

You can use the hidden and block classes with breakpoints, along with a bit of JavaScript:

// components/Navbar.tsx
"use client";
import { useState } from "react";
export default function Navbar() {
  const [open, setOpen] = useState(false);
  return (
    <nav className="bg-white shadow-md px-4 py-3 relative">
      <div className="flex justify-between items-center max-w-6xl mx-auto">
        <div className="font-bold text-xl">MyApp</div>
        <button
          className="md:hidden text-2xl"
          onClick={() => setOpen((prev) => !prev)}
          aria-label="Toggle menu"
        >
          ☰
        </button>
        <ul
          className={`
            ${open ? "block" : "hidden"} 
            absolute top-full left-0 w-full bg-white 
            flex flex-col space-y-2 p-4 shadow-md
            md:static md:flex md:flex-row md:space-x-6 md:space-y-0 md:shadow-none md:p-0
          `}
        >
          <li>
            <a href="#" className="block hover:text-blue-600">
              Home
            </a>
          </li>
          <li>
            <a href="#" className="block hover:text-blue-600">
              Features
            </a>
          </li>
          <li>
            <a href="#" className="block hover:text-blue-600">
              Contact
            </a>
          </li>
        </ul>
      </div>
    </nav>
  );
}

The menu is hidden on small screens (using hidden md:flex) and clicking the ☰ button shows or hides the menu.

21.png

Responsive Features Section

<section class="py-16 bg-gray-50">
  <div class="max-w-6xl mx-auto px-6">
    <h2 class="text-3xl font-bold text-center mb-12">Our Features</h2>
    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-8">
      <div class="bg-white p-6 rounded shadow hover:shadow-lg transition">
        <h3 class="text-xl font-semibold mb-2">Performance</h3>
        <p class="text-gray-600">Lightning-fast load times and smooth interactions.</p>
      </div>
      <div class="bg-white p-6 rounded shadow hover:shadow-lg transition">
        <h3 class="text-xl font-semibold mb-2">Scalability</h3>
        <p class="text-gray-600">Grows with your needs, no matter how big you get.</p>
      </div>
      <div class="bg-white p-6 rounded shadow hover:shadow-lg transition">
        <h3 class="text-xl font-semibold mb-2">Customization</h3>
        <p class="text-gray-600">Easily tweak colors, spacing, and more in your config.</p>
      </div>
    </div>
  </div>
</section>

On mobile one column (using grid-cols-1), on small screens (sm:) two columns while on large screens (lg:) three columns. The gap-8 ensures there’s even spacing between items. This section will stack nicely on phones, split into two columns on tablets, and display three columns side-by-side on desktops—all with just a few utility classes.

22.png
23.png

Customization of the CSS file

Tailwind is really powerful because you can customize it easily. You don't have to stick with the default colors, fonts, or spacing; you can easily change Tailwind to fit your brand or project.

Changing the Color Palette

In the tailwind.config.js file, under the theme.extend.colorssection, you can create your own color names:

// tailwind.config.js
module.exports = {
  content: ["./src/**/*.{html,js,jsx,ts,tsx}", "./index.html"],
  theme: {
    extend: {
      colors: {
        brandBlue: "#0d3b66",
        brandCoral: "#f95738",
        brandMint: "#6fcf97",
      },
    },
  },
  plugins: [],
};

Now, you can use classes like bg-brandBlue, text-brandCoral, or border-brandMint anywhere in your code. This keeps your color choices consistent and makes your code easier to read instead of using hex values.

<div className="bg-brandBlue text-brandCoral">Testing color palette </div>

Adding Custom Fonts and Spacing

First, add the font in the <head> section of your code (like from Google Fonts):

<head>
<link
  href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;800&display=swap"
  rel="stylesheet"
/>
</head>

Then, reference it in tailwind.config.js:

theme: {
  extend: {
    fontFamily: {
      sans: ["Inter", "ui-sans-serif", "system-ui"],
      heading: ["Montserrat", "ui-sans-serif", "system-ui"],
    },
  },
},

You can use it with classes like this:

<h1 class="font-heading text-4xl">Hello, world!</h1>

Under theme.extend.spacing, you can add new spacing values:

extend: {
  spacing: {
    72: "18rem",
    84: "21rem",
    96: "24rem",
  },
}

Now you can use them with classes like mt-72 or p-96 to get the spacing you need.

Extending Tailwind with Plugins

Tailwind has a bunch of official plugins that add tools for forms, typography, aspect ratios, and more. To install, run:

npm install -D @tailwindcss/forms @tailwindcss/typography @tailwindcss/aspect-ratio @tailwindcss/container-queries

Then enable them in your tailwind.config.js file:

/** @type {import('tailwindcss').Config} */
module.exports = {
  // ...
  plugins: [
    require('@tailwindcss/typography'),
    require('@tailwindcss/forms'),
    require('@tailwindcss/aspect-ratio'),
    require('@tailwindcss/container-queries'),
  ]
}

Now you can use the new plugin like this:

<div class="aspect-w-16 aspect-h-9">
  <iframe src="https://www.youtube.com/embed/dQw4w9WgXcQ" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>

Using @apply for Reusable Component Styles

If you notice that you’re repeating styles, move them into a CSS file:


@import "tailwindcss";
.btn-primary {
  @apply bg-blue-500 text-white font-semibold py-2 px-4 rounded-lg hover:bg-blue-600 transition;
}
/* Define a card component */
.card {
  @apply bg-white rounded-lg shadow-md p-6 hover:shadow-lg transition-shadow;
}

Then in your code, you can use it like this:

<button class="btn-primary">Subscribe</button>
<div class="card">
  <h3>Card Title</h3>
  <p>Card content goes here.</p>
</div>

Using Arbitrary Values

Sometimes, the utility classes in Tailwind don’t provide the exact size you need. For instance, you might want 22px of padding instead of the default options like 20px or 24px. This is when arbitrary values can help. Arbitrary values allow you to use specific styles without changing your configuration. You just put your custom value in square brackets within the class name.

Here are a few examples:

<!-- Arbitrary padding -->
<div class="p-[22px]">Custom padding</div>
<!-- Arbitrary width -->
<div class="w-[540px]">Fixed width</div>
<!-- Arbitrary border color -->
<div class="border border-[#ff4500]">Custom border color</div>

Using random values can be really useful for making quick adjustments, creating unique spaces, or when you need everything to be exactly right in your designs. There's no need to make your Tailwind setup too complicated.

Dark Mode in Tailwind

Tailwind CSS makes it easy to use dark mode with the dark: variant, so you can style your website for both light and dark themes. By default, Tailwind uses the prefers-color-scheme to checks if the user’s device is set to dark mode and applies the dark styles automatically.

<div class="bg-white dark:bg-gray-800 rounded-lg px-6 py-8 ring shadow-xl ring-gray-900/5">
  <h3 class="text-gray-900 dark:text-white mt-5 text-base font-medium tracking-tight">Writes upside-down</h3>
  <p class="text-gray-500 dark:text-gray-400 mt-2 text-sm">
    The Zero Gravity Pen can be used to write in any orientation, including upside-down. It even works in outer space.
  </p>
</div>

If you want to control dark mode manually, you can set up your Tailwind configuration to use a custom selector:

/* app.css */
@import "tailwindcss";
@custom-variant dark (&amp;:where(.dark, .dark *));

Then, in your HTML, you can add the dark class like this:

<html class="dark">
  <body>
    <div class="bg-white dark:bg-black">
      <!-- Content here -->
    </div>
  </body>
</html>

You can also use JavaScript to dynamically change the class and save the user's preference in localStorage:

document.documentElement.classList.toggle(
  "dark",
  localStorage.theme === "dark" ||
    (!("theme" in localStorage) && window.matchMedia("(prefers-color-scheme: dark)").matches),
);

If you prefer to use a data-theme attribute, you can change the variant like this:

@custom-variant dark (&amp;:where([data-theme=dark], [data-theme=dark] *));

And in your HTML:

<html data-theme="dark">
  <body>
    <div class="bg-white dark:bg-black">
      <!-- Content here -->
    </div>
  </body>
</html>

To fully control themes, you can do the following:

// Apply on page load
const systemPrefersDark = window.matchMedia("(prefers-color-scheme: dark)").matches;
document.documentElement.classList.toggle(
  "dark",
  localStorage.theme === "dark" || (!("theme" in localStorage) && systemPrefersDark),
);
// Set preference
localStorage.theme = "light"; // Light mode
localStorage.theme = "dark";  // Dark mode
localStorage.removeItem("theme"); // System default

You can also save theme preferences on the server if you're using server-side rendering (SSR).

Building Reusable Components

Organizing repeated designs into separate components makes your code easier to manage.

  1. Organizing in Pure HTML/CSS Projects: Your folder structure might look like this and you can include component HTML through server-side includes or templates.:

src/
  components/
    button.html
    card.html
    alert.html
    
  styles/
    components.css

  • Using @layer components + @apply:

/* styles/components.css */
@layer components {
  .btn {
    @apply btn-primary; /* reusing the earlier definition */
  }
  .alert-error {
    @apply bg-red-100 text-red-800 border border-red-300 p-4 rounded;
  }
}

  • Creating a Design System: Define core components like Buttons, Alerts, Cards, and Forms. Use meaningful class names like .btn-primary, .alert-success, and .card . You can reuse the components whenever you need it in your project. Here’s an example of reusable component you can use:


@import "tailwindcss";
.btn-primary {
  @apply bg-blue-500 text-white font-semibold py-2 px-4 rounded-lg hover:bg-blue-600 transition;
}
.btn-outline {
  @apply border border-black rounded-lg px-4 py-2
}
.alert-error {
  @apply text-red-400
}
.alert-success {
  @apply text-green-400
}
/* Define a card component */
.card {
  @apply bg-white rounded-lg shadow-md p-6 hover:shadow-lg transition-shadow;
}

Here’s how to check if it works:

import React from 'react'
const page = () => {
  return (
     <div className="max-w-4xl mx-auto p-6 space-y-8">
      {/* Buttons */}
      <div className="space-x-4">
        <button className="btn-primary">Primary</button>
        <button className="btn-outline">Outline</button>
      </div>
      {/* Alerts */}
      <div className="space-y-2">
        <div className="alert-success">Operation completed successfully.</div>
        <div className="alert-error">Something went wrong. Please try again.</div>
      </div>
      {/* Card */}
      <div className="card">
        <h2 className="text-xl font-bold mb-2">Card Title</h2>
        <p className="text-gray-700">
          This is a reusable card component. You can use it for displaying
          content inside a clean layout.
        </p>
      </div>
    </div>
  )
}
export default page
24.png

Animations and Transitions

Adding movement makes your user interface more lively. Tailwind provides built-in utilities and plugins for this.

  1. Using Built-In Transition Utilities:

<button class="bg-brandBlue text-white px-4 py-2 rounded transition duration-300 ease-in-out hover:scale-105">
  Hover Me
</button>

Here, transition + duration-300 creates a 300ms transition, ease-in-out smooths the start and end, and hover:scale-105 makes the button grow 5% when hovered over.

  1. Simple Fade-In Animation: To use the animation plugin, first install it:

npm install -D @tailwindcss/animate

Then configure it and read the documentation:

plugins: [
  require("@tailwindcss/animate"),
],

Use it like this:

<div class="animate-fade-in">
  <h1>Hello with a fade-in!</h1>
</div>

  1. Scroll-Based or Custom Animations:

You can use IntersectionObserver in JavaScript to add Tailwind utility classes when elements enter the view:

const observer = new IntersectionObserver((entries) => {
  entries.forEach((entry) => {
    if (entry.isIntersecting) {
      entry.target.classList.add("opacity-100", "translate-y-0");
    }
  });
});
document.querySelectorAll(".js-scroll").forEach((el) => {
  observer.observe(el);
});

CSS setup:

<div class="opacity-0 translate-y-6 transition duration-700 js-scroll">
  Scroll-to-reveal content
</div>

This starts hidden and shifted down. When it scrolls into view, JavaScript adds the classes to make it visible. Here’s example of an animated hero section on page load, using Tailwind CSS utilities like transition, duration, and opacity along with React's useEffect and useState to trigger the animation.

// app/page.tsx or your homepage file
"use client";
import { useEffect, useState } from "react";
export default function HomePage() {
  const [visible, setVisible] = useState(false);
  useEffect(() => {
    const timer = setTimeout(() => setVisible(true), 100);
    return () => clearTimeout(timer);
  }, []);
  return (
    <main className="min-h-screen bg-blue-100">
      {/* Navbar */}
      <nav className="bg-white shadow-md px-6 py-4">
        <div className="flex justify-between items-center max-w-6xl mx-auto">
          <h1 className="text-xl font-bold">MyApp</h1>
          <ul className="hidden md:flex gap-6 text-gray-700">
            <li><a href="#" className="hover:text-blue-600">Home</a></li>
            <li><a href="#" className="hover:text-blue-600">Features</a></li>
            <li><a href="#" className="hover:text-blue-600">Contact</a></li>
          </ul>
        </div>
      </nav>
      {/* Hero Section */}
      <section className="flex items-center justify-center min-h-[calc(100vh-80px)] px-4">
        <div
          className={`text-center transition-all duration-700 ease-out
          ${visible ? "opacity-100 translate-y-0" : "opacity-0 translate-y-4"}`}
        >
          <h2 className="text-5xl font-bold text-gray-900 mb-4">
            Welcome to the Future
          </h2>
          <p className="text-lg text-gray-700 mb-6 max-w-xl mx-auto">
            Build fast, responsive websites with Tailwind CSS.
          </p>
          <button className="bg-black text-white px-6 py-3 rounded hover:bg-gray-800 transition">
            Explore Now
          </button>
        </div>
      </section>
    </main>
  );
}
25.png

Advanced Layouts

Tailwind is great for complex layouts using utility classes—no custom CSS is needed.

  1. Full-Page Layout with Sticky Header:

<body class="min-h-screen flex flex-col">
  <header class="bg-white shadow sticky top-0 z-10">
    <!-- navbar here -->
  </header>
  <main class="flex-grow">
    <!-- page content -->
  </main>
  <footer class="bg-gray-800 text-white p-4 text-center">
    © 2025 Your Company
  </footer>
</body>

Here, sticky top-0 keeps the header at the top, and flex-grow makes the main content fill the available space.

  1. CSS Grid + Tailwind for Responsive Dashboards:

<div class="grid grid-cols-1 lg:grid-cols-4 gap-6 p-6">
  <aside class="lg:col-span-1 bg-white p-4 rounded shadow">Sidebar</aside>
  <section class="lg:col-span-3 space-y-6">
    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
      <div class="bg-white p-4 rounded shadow">Widget 1</div>
      <div class="bg-white p-4 rounded shadow">Widget 2</div>
    </div>
    <div class="bg-white p-4 rounded shadow">Main Content Area</div>
  </section>
</div>

In this example, grid-cols-1 lg:grid-cols-4 shows a single column on mobile but four columns on desktop. lg:col-span-3 allows the main section to take up three columns.

  1. Split Screens or Masonry-Style Grids:

Split Hero:

<section class="min-h-screen grid grid-cols-1 md:grid-cols-2">
  <div class="flex items-center justify-center bg-brandBlue text-white p-8">
    <h1 class="text-4xl font-bold">Left Side</h1>
  </div>
  <div class="flex items-center justify-center bg-white p-8">
    <p class="text-gray-800">Right Side Content</p>
  </div>
</section>

Masonry (CSS columns):

<div class="columns-1 sm:columns-2 lg:columns-3 gap-4 p-4">
  <div class="mb-4">
    <img src="..." class="w-full mb-2 rounded" />
    <p>Caption</p>
  </div>
  <!-- repeat items… -->
</div>

This uses CSS columns for a Pinterest-like layout, and Tailwind’s columns-*utilities handle the breakpoints. Now, to use what you’ve learnt in the Tailwind tutorial, let’s create a blog page using BCMS starter and styling with Tailwind CSS. Set it up using the BCMS doc and paste this code to import your content:

import { bcms } from "@/bcms";
import { BlogEntry } from "../../bcms/types/ts";
import { BCMSContentManager, BCMSImage } from "@thebcms/components-react";
export default async function Home() {
  const blogs = (await bcms.entry.getAll("blog")) as BlogEntry[];
  return (
    <main>
      <div className="flex flex-col gap-4">
        {blogs.map((blog, blogIdx) => {
          if (!blog.meta.en || !blog.content.en) {
            return "";
          }
          return (
            <div key={blogIdx} className="flex flex-col gap-8">
              <h1 className="mb-10 text-3xl">{blog.meta.en.title}</h1>
              <BCMSImage
                className="w-full h-60 object-cover"
                media={blog.meta.en.cover_image}
                clientConfig={bcms.getConfig()}
              />
              <BCMSContentManager items={blog.content.en} />
            </div>
          );
        })}
      </div>
    </main>
  );
}

Conclusion

In this guide, you learned how Tailwind CSS can really improve your frontend workflow, especially when used with a CMS like BCMS. We started with the basics, like how to install Tailwind and the main idea behind its utility-first approach. Then, we explored how to customize it, create reusable components, manage dark mode, add animations, and even design complex layouts like blogs and portfolios.

BCMS allows you to organize your content in any way you like. It’s quick, adaptable, and easy for developers to use. When you combine it with Tailwind, you get an excellent setup for creating websites and apps that are powered by a CMS, load quickly, and have a modern look.

It takes a minute to start using BCMS

Start free with GitHub
Start free with Google
Gradient
Content

Join our Newsletter

Get all the latest BCMS updates, news and events.

You’re in!

The first mail will be in your inbox next Monday!
Until then, let’s connect on Discord as well:

Join BCMS community on Discord

By submitting this form you consent to us emailing you occasionally about our products and services. You can unsubscribe from emails at any time, and we will never pass your email to third parties.

Gradient

Continue reading

There are many actionable insights in this blog post. Learn more: