Your Full Tailwind CSS Primer

0
7


CSS frameworks have modified the best way builders method net improvement by offering pre-built elements and kinds. Nonetheless, many frameworks include opinionated designs and bloated stylesheets which restrict customization.

Tailwind CSS takes a distinct method. As a utility-first CSS framework, it offers low-level utility courses that permit builders to construct customized designs with out being constrained by pre-defined elements.

With over 675,375 web sites utilizing Tailwind CSS and over 8.61 million dependent repositories, Tailwind has develop into extra than simply one other CSS framework.

On this article, we’ll go over understanding the ideas of Tailwind CSS, the setup course of, and sensible utilization so you can begin constructing your stunning customized UIs with out studying CSS.

Let’s get began!

What Is Tailwind CSS?

Tailwind CSS is a extremely customizable, low-level CSS framework that gives a set of utility courses to quickly construct customized person interfaces. It was first developed and launched by Adam Wathan in 2017.

Since then, Tailwind has seen an upward trajectory in web sites being constructed utilizing the Tailwind library.

"Tailwind Usage Stats" of the top 1 million websites with a chart showing Tailwind growth.

Whereas the expansion presently appears to have slowed as per the BuiltWith charts, the framework itself is commonly up to date with new options, courses, and extra.

Based on BuiltWith’s tech stack knowledge, over 100,000 web sites within the US alone use Tailwind to construct their person interfaces together with the UK, Indonesia, Germany, and different international locations making it to the highest 10 customers of this library.

Statistics of "Top 10 Countries Using Tailwind" in a chart showing USA at the top and Brazil at the bottom.

The core philosophy behind Tailwind CSS is to supply builders with a set of constructing blocks slightly than pre-built elements. These constructing blocks are small, single-purpose utility courses that may be mixed to create advanced and responsive layouts.

This method permits for higher flexibility and management over the design, as you may customise each side of your UI with out being restricted by the framework’s opinionated kinds.

What Makes Tailwind CSS Totally different?

Historically, when working with CSS, builders write customized courses in separate stylesheets to fashion their HTML parts. This method can result in massive CSS recordsdata and make sustaining and updating kinds throughout a venture difficult.

Tailwind offers a complete set of utility courses that may be utilized on to HTML parts. These courses are extremely composable, permitting builders to construct advanced, customized designs with out writing a single line of customized CSS.

For instance, as a substitute of writing a customized CSS class to fashion a button, you need to use Tailwind’s pre-defined courses like this:

<button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
  Button
</button>

This method has a number of advantages:

  1. Sooner improvement: The pre-defined courses assist builders quickly construct and iterate on designs with out continually switching between HTML and CSS recordsdata.
  2. Constant styling: Tailwind offers a standardized set of courses, which helps keep consistency in design throughout a venture.
  3. Smaller CSS recordsdata: As a result of kinds are utilized immediately within the HTML, there’s no want for big, customized CSS recordsdata.
  4. Simpler upkeep: With kinds outlined within the HTML, it’s simpler to see how adjustments will have an effect on a particular aspect with out searching by means of separate CSS recordsdata.
  5. Higher efficiency: Many fashionable styling methods like Emotion or Styled Elements depend on javascript (normally throughout run-time, slower efficiency) to render your css. Tailwind is simply CSS on the finish of the day.

Tailwind turned me into a whole stack developer 🤝
Boris Lepikhin

Getting Began With Tailwind CSS

Earlier than we soar into examples, let’s arrange a primary venture with Tailwind CSS. We’ll assume you could have some familiarity with HTML and CSS. Additionally, you might want to have npm put in in your system. When you’re performed, you’re good to go forward!

Create a brand new listing in your venture and navigate into it:

mkdir my-tailwind-project
cd my-tailwind-project

Initialize a brand new npm venture and set up Tailwind CSS:

npm init -y
npm set up -D tailwindcss

Create a tailwind.config.js file:

npx tailwindcss init

Create an enter.css file and add the next:

@tailwind base;
@tailwind elements;
@tailwind utilities;

Replace your tailwind.config.js file to course of your enter.css:

module.exports = {
  content material: ["./src/**/*.{html,js}"],
  theme: {
    prolong: {},
  },
  plugins: [],
}

Create an index.html file in a src listing and add the next:

<!DOCTYPE html>
<html>
  <head>
    <hyperlink href="https://www.dreamhost.com/dist/output.css" rel="stylesheet">
  </head>
  <physique>
    <h1 class="text-3xl font-bold text-center mt-4">Welcome to Tailwind CSS!</h1>
  </physique>
</html>

Construct your CSS:

npx tailwindcss -i ./src/enter.css -o ./src/output.css --watch

Now, whenever you open index.html in your browser, it’s best to see a big, daring heading that claims Welcome to Tailwind CSS!

"Welcome to Tailwind CSS!" bold heading.

Congratulations, you’ve arrange your first Tailwind venture!

Tailwind CSS Utility Lessons

Tailwind CSS offers a variety of utility courses that cowl numerous facets of styling, comparable to format, spacing, typography, colours, and extra. These courses comply with a naming conference that makes it intuitive to know their goal.

DreamHost Glossary

Typography

Typography is a technique of arranging a typeface in variations of font, dimension, and spacing. This includes making textual content’s look, fashion, and association readable and visually pleasing.

Learn Extra

Let’s discover some generally used utility courses in Tailwind CSS.

Tailwind Structure Lessons

  • flex: Applies a flex container.
  • grid: Applies a grid container.
  • block: Shows a component as a block-level aspect.
  • inline: Shows a component as an inline-level aspect.

Instance:

<div class="flex">
  <div>Merchandise 1</div>
  <div>Merchandise 2</div>
</div>

Tailwind Spacing Lessons

  • m-{dimension}: Applies margin on all sides.
  • p-{dimension}: Applies padding on all sides.
  • mx-{dimension}: Applies margin on the left and proper.
  • py-{dimension}: Applies padding on the highest and backside.

Instance:

<div class="m-4 p-2">
  Content material with margin and padding
</div>

Tailwind Typography Lessons

  • text-{dimension}: Units the font dimension.
  • font-{weight}: Units the font weight.
  • text-{coloration}: Units the textual content coloration.
  • uppercase, lowercase, capitalize: Transforms textual content case.

Instance:

<p class="text-lg font-bold text-blue-500 uppercase">
  Styled textual content
</p>

Tailwind Colours

Tailwind CSS offers a default coloration palette that may be personalized. Colours are outlined utilizing a mixture of the colour identify and shade.

  • bg-{coloration}-{shade}: Units the background coloration.
  • text-{coloration}-{shade}: Units the textual content coloration.
  • border-{coloration}-{shade}: Units the border coloration.

Instance:

<button class="bg-blue-500 text-white border-2 border-blue-700">
  Button
</button>

Tailwind Lessons For Responsive Design

Tailwind makes it straightforward to create responsive designs by offering responsive variants for many of its utility courses. These variants can help you specify completely different kinds for various display screen sizes.

Tailwind makes use of a mobile-first method, the place the bottom kinds are utilized to all display screen sizes, after which bigger display screen sizes are focused utilizing responsive prefixes:

  • sm: Applies kinds to small screens and up (640px and up).
  • md: Applies kinds to medium screens and up (768px and up).
  • lg: Applies kinds to massive screens and up (1024px and up).
  • xl: Applies kinds to extra-large screens and up (1280px and up).
  • 2xl: Applies kinds to extra-extra-large screens and up (1536px and up).

To make use of these responsive variants, merely prefix the utility class with the specified display screen dimension:

<div class="bg-blue-500 md:bg-green-500 lg:bg-red-500">
  <!-- Content material -->
</div>

On this instance, the div can have a blue background on small screens, a inexperienced background on medium screens, and a pink background on massive screens.

You can even use responsive variants to manage the format of your parts:

<div class="flex flex-col md:flex-row">
  <div class="w-full md:w-1/2 lg:w-1/3">Column 1</div>
  <div class="w-full md:w-1/2 lg:w-1/3">Column 2</div>
  <div class="w-full md:w-1/2 lg:w-1/3">Column 3</div>
</div>

Right here, the columns will stack vertically on small screens, show in two columns on medium screens, and three columns on massive screens.

Get Content material Delivered Straight to Your Inbox

Subscribe to our weblog and obtain nice content material identical to this delivered straight to your inbox.

Customizing The Default Lessons Of Tailwind CSS

One of many strengths of Tailwind CSS is its customization choices. You possibly can simply customise the default configuration to match your venture’s design necessities. The tailwind.config.js file lets you prolong or override the default settings.

Listed below are a couple of widespread customization choices. You possibly can completely customise each a part of Tailwind, so this isn’t an exhaustive checklist by any means.

Colours

Tailwind CSS offers a wealthy coloration palette out of the field, however you may simply customise it to match your venture’s branding or design necessities. The tailwind.config.js file lets you prolong or override the default coloration palette. So as to add customized colours, you need to use the prolong property inside the colours object:

// tailwind.config.js
module.exports = {
  theme: {
    prolong: {
      colours: {
        'brand-primary': '#ff5a5f',
        'brand-secondary': '#484848',
        'brand-accent': '#ffcc00',
      },
    },
  },
}

On this instance, we’ve added three customized colours: brand-primary, brand-secondary, and brand-accent.

These colours can now be used with utility courses like bg-brand-primary, text-brand-secondary, border-brand-accent, and so on. You can even modify current coloration shades or add new shades to the default coloration palette like so:

// tailwind.config.js
module.exports = {
  theme: {
    prolong: {
      colours: {
        blue: {
          '100': '#e6f0ff',
          '200': '#c3d9ff',
          '300': '#a1c2ff',
          '400': '#7eabff',
          … and so forth …
        },
      },
    },
  },
}

Font Household

Tailwind CSS makes use of a default font household stack, however just like colours, you may change these defaults to match your venture’s typography fashion.

Within the tailwind.config.js file, you may prolong or exchange the default font household. So as to add customized font households, use the prolong property inside the fontFamily object:

// tailwind.config.js
module.exports = {
  theme: {
    prolong: {
      fontFamily: {
        sans: ['Poppins', 'sans-serif'],
        serif: ['Merriweather', 'serif'],
        mono: ['Fira Code', 'monospace'],
      },
    },
  },
}

You can even fully exchange the default font household by omitting the prolong property:

// tailwind.config.js
module.exports = {
  theme: {
    fontFamily: {
      'physique': ['Open Sans', 'sans-serif'],
      'heading': ['Montserrat', 'sans-serif'],
    },
  },
}

Responsive Breakpoints

Tailwind CSS offers a responsive design system out of the field, however you may additional customise it to match your venture’s particular breakpoints and responsive necessities.

By modifying the screens object within the tailwind.config.js file, you may outline customized breakpoints and apply completely different kinds primarily based on display screen sizes.

For instance, let’s say you could have a singular breakpoint at 1440px the place you wish to apply particular kinds:

// tailwind.config.js
module.exports = {
  theme: {
    screens: {
      'xs': '480px',
      'sm': '640px',
      'md': '768px',
      'lg': '1024px',
      'xl': '1440px',
    },
  },
}

With this practice breakpoint outlined, you need to use responsive utility courses like xl:text-lg, xl:flex, xl:w-1/2, and so on., to use kinds particularly for screens wider than 1440px.

Spacing

Tailwind CSS offers a complete set of spacing values for margins, paddings, and different spacing-related utilities. You possibly can customise these values to match your venture’s format necessities. So as to add customized spacing values, use the prolong property inside the spacing object:

// tailwind.config.js
module.exports = {
  theme: {
    prolong: {
      spacing: {
        '13': '3.25rem',
        '15': '3.75rem',
        '128': '32rem',
        '144': '36rem',
      },
    },
  },
}

Integrating Third-Occasion Libraries

Tailwind CSS integrates with fashionable front-end libraries and frameworks like React, Vue, and Angular. When working with these libraries, you may leverage Tailwind’s utility courses to fashion your elements to create constant and maintainable person interfaces. For instance, in a React element, you may apply Tailwind utility courses on to the JSX parts:

import React from 'react';

const Card = () => {
  return (
    <div className="bg-white shadow-md rounded-lg p-6">
      <h2 className="text-2xl font-bold mb-4">Card Title</h2>
      <p className="text-gray-600">Card content material goes right here...</p>
    </div>
  );
};

export default Card;

This multi-framework method makes it very easy to deliver collectively the most effective of all worlds, serving to you create a stunning app with nearly no effort.

Constructing A Easy Utility In Tailwind CSS

Let’s say you’re constructing a easy touchdown web page for a fictional on-line course platform known as LearnHub utilizing Tailwind to fashion the whole web page.

Step 1: Setting Up The HTML Construction

First, let’s create the essential HTML construction for our touchdown web page:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta identify="viewport" content material="width=device-width, initial-scale=1.0">
  <hyperlink href="https://www.dreamhost.com/weblog/tailwind-css/output.css" rel="stylesheet">
  <title>LearnHub - On-line Course Platform</title>
</head>
<physique>
  <header>
    <!-- Navigation menu will go right here -->
  </header>

  <predominant>
    <!-- Important content material will go right here -->
  </predominant>

  <footer>
    <!-- Footer content material will go right here -->
  </footer>
</physique>
</html>

On this step, we’ve arrange the essential construction of our HTML doc. Now we have the <head> part the place we embrace the required meta tags and hyperlink to our CSS file (output.css). Contained in the <physique>, we have now the <header>, <predominant>, and <footer> sections the place we’ll add our content material.

Step 2: Creating The Navigation Menu

Now, let’s add a easy navigation menu to the <header> part utilizing Tailwind CSS utility courses:

<header class="bg-blue-600 text-white py-4">
  <nav class="container mx-auto flex justify-between items-center">
    <a href="#" class="text-2xl font-bold">LearnHub</a>
    <ul class="flex space-x-4">
      <li><a href="#" class="hover:text-blue-200">Programs</a></li>
      <li><a href="#" class="hover:text-blue-200">Pricing</a></li>
      <li><a href="#" class="hover:text-blue-200">About</a></li>
    </ul>
  </nav>
</header>
"LearnHub" blue top bar in focus with buttons for courses, pricing, and about to the right.

Right here’s what every class does:

  • bg-blue-600: Units the background coloration of the header to a shade of blue.
  • text-white: Units the textual content coloration to white.
  • py-4: Provides padding to the highest and backside of the header.
  • container mx-auto: Facilities the navigation menu horizontally.
  • flex justify-between items-center: Makes use of flexbox to house out the emblem and menu gadgets evenly and align them vertically.
  • text-2xl font-bold: Makes the emblem textual content bigger and daring.
  • flex space-x-4: Provides spacing between the menu gadgets utilizing flexbox.
  • hover:text-blue-200: Adjustments the textual content coloration to a lighter shade of blue when hovering over the menu gadgets.

Step 3: Including The Important Content material

Let’s add some content material to the <predominant> part of our touchdown web page:

<predominant class="container mx-auto mt-8">
  <part class="bg-gray-100 rounded-lg p-6">
    <h1 class="text-3xl font-bold mb-4">Welcome to LearnHub</h1>
    <p class="text-gray-700 mb-6">Uncover a world of information with our on-line programs.</p>
    <a href="#" class="bg-blue-600 text-white px-4 py-2 rounded hover:bg-blue-700">Begin Studying</a>
  </part>

  <part class="mt-8">
    <h2 class="text-2xl font-bold mb-4">Featured Programs</h2>
    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
      <!-- Course playing cards will go right here -->
    </div>
  </part>
</predominant>

Right here’s what every class does:

  • container mx-auto: Facilities the primary content material horizontally.
  • mt-8: Provides margin to the highest of the primary content material.
  • bg-gray-100 rounded-lg p-6: Provides a light-weight grey background, rounds the corners, and provides padding to the welcome part.
  • text-3xl font-bold mb-4: Makes the heading textual content bigger, daring, and provides margin on the backside.
  • text-gray-700 mb-6: Units the textual content coloration to a darker grey and provides a margin on the backside for the paragraph.
  • bg-blue-600 text-white px-4 py-2 rounded hover:bg-blue-700: Types the Begin Studying button with a blue background, white textual content, padding, rounded corners, and a darker blue background on hover.
  • text-2xl font-bold mb-4: Makes the Featured Programs heading bigger, daring, and provides margin on the backside.
  • grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4: Creates a responsive grid format for the course playing cards. It exhibits one column on small screens, two columns on medium screens, and three columns on massive screens, with a niche between the playing cards.

Placing the header and predominant code collectively it’s best to have the next output:

"Welcome to LearnHub" large, bold heading, a "Start Learning" blue button below, and "Featured Courses" in bold.

Step 4: Including The Footer

Lastly, let’s add a easy footer to our touchdown web page:

<footer class="bg-gray-800 text-white py-4 mt-8">
  <div class="container mx-auto text-center">
    <p>&copy; 2023 LearnHub. All rights reserved.</p>
  </div>
</footer>

Right here’s what every class does:

  • bg-gray-800 text-white: Units the background coloration of the footer to a darkish grey and the textual content coloration to white.
  • py-4: Provides padding to the highest and backside of the footer.
  • mt-8: Provides margin to the highest of the footer.
  • container mx-auto: Facilities the footer content material horizontally.
  • text-center: Facilities the textual content inside the footer.

Placing It All Collectively

Right here’s the ultimate code put collectively:

<!DOCTYPE html>
<html lang="en">
 <head>
   <meta charset="UTF-8" />
   <meta identify="viewport" content material="width=device-width, initial-scale=1.0" />
   <hyperlink href="https://www.dreamhost.com/weblog/tailwind-css/output.css" rel="stylesheet" />
   <title>LearnHub - On-line Course Platform</title>
 </head>
 <physique>
   <header class="bg-blue-600 py-4 text-white">
     <nav class="container mx-auto flex items-center justify-between">
       <a href="#" class="text-2xl font-bold">LearnHub</a>
       <ul class="flex space-x-4">
         <li><a href="#" class="hover:text-blue-200">Programs</a></li>
         <li><a href="#" class="hover:text-blue-200">Pricing</a></li>
         <li><a href="#" class="hover:text-blue-200">About</a></li>
       </ul>
     </nav>
   </header>

   <predominant class="container mx-auto mt-8">
     <part class="rounded-lg bg-gray-100 p-6">
       <h1 class="mb-4 text-3xl font-bold">Welcome to LearnHub</h1>
       <p class="mb-6 text-gray-700">Uncover a world of information with our on-line programs.</p>
       <a href="#" class="rounded bg-blue-600 px-4 py-2 text-white hover:bg-blue-700">Begin Studying</a>
     </part>

     <part class="mt-8">
       <h2 class="mb-4 text-2xl font-bold">Featured Programs</h2>
       <div class="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3">
         <!-- Course playing cards will go right here -->
       </div>
     </part>
   </predominant>

   <footer class="mt-8 bg-gray-800 py-4 text-white">
     <div class="container mx-auto text-center">
       <p>&copy; 2023 LearnHub. All rights reserved.</p>
     </div>
   </footer>
 </physique>
</html>

To show the output to customers, you’ll have to have Tailwind CSS correctly arrange in your venture. Be sure to have adopted the set up steps talked about earlier, together with creating the tailwind.config.js file and processing your CSS with Tailwind.

After you have Tailwind CSS arrange, it can save you this code in an HTML file (e.g., index.html) and open it in an internet browser. The browser will render the touchdown web page with the kinds utilized utilizing Tailwind CSS utility courses. In the event you merely wish to take a look at Tailwind, you may all the time use Tailwind Play, a nifty little software by Tailwind the place you may play with the completely different courses.

The final output of the code for LearnHub with a header, small text, blue button, and a footer.

And there you could have it! We’ve created a easy touchdown web page for our fictional on-line course platform utilizing Tailwind CSS utility courses.

The place To Go From Right here?

Now that you simply’ve seen the ability and adaptability of Tailwind CSS, the chances are countless right here. Its versatile and customizable nature may help you construct something from easy touchdown pages to advanced net functions whereas sustaining a clear and constant design.

Listed below are some concepts to get you began:

  • Construct a portfolio web site: Present your expertise and tasks with a surprising portfolio.
  • Create a weblog: Share your ideas and concepts with the world utilizing a stunning and useful weblog designed with Tailwind.
  • Develop an internet software: Tailwind CSS is ideal for constructing person interfaces for net functions of every kind.

It doesn’t matter what you construct, Tailwind CSS may help you create a surprising and well-functioning web site.

And relating to internet hosting your creation, contemplate a dependable and scalable answer like DreamHost’s VPS companies to make sure your web site runs easily and effectively.

Begin constructing stunning person interfaces with minimal CSS know-how!

Create a Web site for All

We make certain your web site is quick and safe so you may give attention to the necessary stuff.

shared hosting