{"id":44082,"date":"2024-04-19T07:00:00","date_gmt":"2024-04-19T14:00:00","guid":{"rendered":"https:\/\/dhblog.dream.press\/blog\/?p=44082"},"modified":"2025-05-21T16:09:23","modified_gmt":"2025-05-21T23:09:23","slug":"tailwind-css","status":"publish","type":"post","link":"https:\/\/www-dev.dreamhost.com\/blog\/tailwind-css\/","title":{"rendered":"Your Complete Tailwind CSS Primer"},"content":{"rendered":"\n

CSS<\/a> frameworks have changed the way developers approach web development by providing pre-built components and styles. However, many frameworks come with opinionated designs and bloated stylesheets which limit customization.<\/p>\n\n\n\n

Tailwind CSS takes a different approach. As a utility-first CSS framework, it provides low-level utility classes that allow developers to build custom designs without being constrained by pre-defined components.<\/p>\n\n\n\n

With over 675,375 websites<\/a> using Tailwind CSS and over 8.61 million dependent repositories<\/a>, Tailwind has become more than just another CSS framework.<\/p>\n\n\n\n

In this article, we\u2019ll go over understanding the concepts of Tailwind CSS, the setup process, and practical usage so you can start building your beautiful custom UIs without learning CSS.<\/p>\n\n\n\n

Let\u2019s get started!<\/p>\n\n\n\n

What Is Tailwind CSS?<\/h2>\n\n\n\n

Tailwind CSS is a highly customizable, low-level CSS framework<\/a> that provides a set of utility classes to rapidly build custom user interfaces. It was first developed and released by Adam Wathan in 2017.<\/p>\n\n\n\n

Since then, Tailwind has seen an upward trajectory<\/a> in websites being built using the Tailwind library.<\/p>\n\n\n\n

\""Tailwind<\/figure>\n\n\n\n

While the growth currently seems to have slowed as per the BuiltWith charts, the framework itself is regularly updated with new features, classes, and more.<\/p>\n\n\n\n

According to BuiltWith\u2019s tech stack data<\/a>, over 100,000 websites in the US alone use Tailwind to build their user interfaces along with the UK, Indonesia, Germany, and other countries making it to the top 10 users of this library.<\/p>\n\n\n\n

\"Statistics<\/figure>\n\n\n\n

The core philosophy behind Tailwind CSS is to provide developers with a set of building blocks rather than pre-built components. These building blocks are small, single-purpose utility classes that can be combined to create complex and responsive layouts.<\/p>\n\n\n\n

This approach allows for greater flexibility and control over the design, as you can customize every aspect of your UI without being limited by the framework’s opinionated styles.<\/p>\n\n\n\n

What Makes Tailwind CSS Different?<\/h2>\n\n\n\n

Traditionally, when working with CSS, developers write custom classes in separate stylesheets to style their HTML elements. This approach can lead to large CSS<\/a> files and make maintaining and updating styles across a project challenging.<\/p>\n\n\n\n

Tailwind provides a comprehensive set of utility classes that can be applied directly to HTML elements. These classes are highly composable, allowing developers to build complex, custom designs without writing a single line of custom CSS.<\/p>\n\n\n\n

For example, instead of writing a custom CSS class to style a button, you can use Tailwind’s pre-defined classes like this:<\/p>\n\n\n\n

<button class=\"bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded\">\n  Button\n<\/button><\/code><\/pre>\n\n\n\n
This approach has several benefits:<\/p>\n\n\n\n
    \n
  1. Faster development<\/strong>: The pre-defined classes help developers rapidly build and iterate on designs without constantly switching between HTML<\/a> and CSS files.<\/li>\n\n\n\n
  2. Consistent styling<\/strong>: Tailwind provides a standardized set of classes, which helps maintain consistency in design across a project.<\/li>\n\n\n\n
  3. Smaller CSS files<\/strong>: Because styles are applied directly in the HTML, there’s no need for large, custom CSS files.<\/li>\n\n\n\n
  4. Easier maintenance<\/strong>: With styles defined in the HTML, it’s easier to see how changes will affect a specific element without hunting through separate CSS files.<\/li>\n\n\n\n
  5. Better performance: <\/strong>Many modern styling systems like Emotion<\/a> or Styled Components<\/a> rely on javascript (usually during run-time, slower performance) to render your css. Tailwind is just CSS at the end of the day.<\/li>\n\n\n<\/ol>\n\n\n\n
    \n
    <\/p>\n\n\nTailwind turned me into a complete stack developer ?\u201d<\/em>
    \u2014 <\/em>    Boris Lepikhin<\/a><\/cite><\/blockquote>\n\n\n\n
    Getting Started With Tailwind CSS<\/h2>\n\n\n\n
    Before we jump into examples, let\u2019s set up a basic project with Tailwind CSS. We\u2019ll assume you have some familiarity with HTML and CSS. Also, you need to have npm installed on your system<\/a>. Once you\u2019re done, you\u2019re good to go ahead!<\/p>\n\n\n\n
    Create a new directory for your project and navigate into it:<\/strong><\/p>\n\n\n\n
    mkdir my-tailwind-project\ncd my-tailwind-project<\/code><\/pre>\n\n\n\n
    Initialize a new npm project and install Tailwind CSS:<\/strong><\/p>\n\n\n\n
    npm init -y\nnpm install -D tailwindcss<\/code><\/pre>\n\n\n\n
    Create a tailwind.config.js file:<\/strong><\/p>\n\n\n\n
    npx tailwindcss init<\/code><\/pre>\n\n\n\n
    Create an input.css file and add the following:<\/strong><\/p>\n\n\n\n
    @tailwind base;\n@tailwind components;\n@tailwind utilities;<\/code><\/pre>\n\n\n\n
    Update your tailwind.config.js file to process your input.css:<\/strong><\/p>\n\n\n\n
    module.exports = {\n  content: [\".\/src\/**\/*.{html,js}\"],\n  theme: {\n    extend: {},\n  },\n  plugins: [],\n}<\/code><\/pre>\n\n\n\n
    Create an index.html file in a src directory and add the following:<\/strong><\/p>\n\n\n\n
    <!DOCTYPE html>\n<html>\n  <head>\n    <link href=\"\/dist\/output.css\" rel=\"stylesheet\">\n  <\/head>\n  <body>\n    <h1 class=\"text-3xl font-bold text-center mt-4\">Welcome to Tailwind CSS!<\/h1>\n  <\/body>\n<\/html><\/code><\/pre>\n\n\n\n
    Build your CSS:<\/strong><\/p>\n\n\n\n
    npx tailwindcss -i .\/src\/input.css -o .\/src\/output.css --watch<\/code><\/pre>\n\n\n\n
    Now, when you open index.html in your browser, you should see a large, bold heading that says Welcome to Tailwind CSS!<\/strong><\/p>\n\n\n\n
    \""Welcome<\/figure>\n\n\n\n
    Congratulations, you\u2019ve set up your first Tailwind project!<\/p>\n\n\n\n
    Tailwind CSS Utility Classes<\/h2>\n\n\n\n
    Tailwind CSS provides a wide range of utility classes that cover various aspects of styling, such as layout, spacing, typography, colors, and more. These classes follow a naming convention that makes it intuitive to understand their purpose.<\/p>\n\n\n\n
    \n\n\n\n
    \n\t\n\t\t<\/svg>\n\t\t<\/span>\n\t\t<\/svg>\n\t<\/a>\n    
    Typography<\/h3>\n    
    Typography is a process of arranging a typeface in variations of font, size, and spacing. This involves making text\u2019s appearance, style, and arrangement readable and visually pleasing.<\/p>\n            \n                            Read More                    <\/a>\n\n<\/div>\n\n<\/p>\n\n\n\n
    Let’s explore some commonly used utility classes in Tailwind CSS<\/a>.<\/p>\n\n\n\n
    Tailwind Layout Classes<\/h3>\n\n\n\n