Get Started with Tailwind CSS in 15 Minutes

栏目: IT技术 · 发布时间: 4年前

内容简介:One of my favorite things I've found after using Tailwind:

Tailwind CSS is a CSS framework that gives you utility classes instead of pre-built components.

Table of Contents

  • A Quick Example - Building a Card
  • Will this make my HTML too busy?
  • What is Tailwind CSS?
  • Here are some types of classes Tailwind provides
  • The Benefits of Tailwind
  • Super Fast Prototyping (if you know CSS well)

One of my favorite things I've found after using Tailwind:

You'll never need to override CSS framework classes again.

Get Started with Tailwind CSS in 15 Minutes

The home page has a really cool example of how to work with Tailwind:

Get Started with Tailwind CSS in 15 Minutes

Building Real Things

This article is focused on taking a look at Tailwind features. If you would like to skip ahead and jump straight into building things with Tailwind, look at these articles:

A Quick Example - Building a Card

Here's an example of a Bootstrap card vs a Tailwind card component. Warning: This may look very weird and you may dismiss Tailwind after this example. Give it some more time and a few practice examples and you'll start to see the power of utility classes and the idea of composition over inheritance .

Essential Reading : Learn React from Scratch! (2020 Edition)

A Bootstrap card :

<div>
  <div>

        <h5>Card Title</h5>
        <p>Content goes here</p>

    </div>
</div>

While the Bootstrap card is easy to create, it isn't the easiest to customize to our own applications. You'll need to override this .card class and maybe even regretfully use !important .

Get Started with Tailwind CSS in 15 Minutes

Let's see Tailwind Card:

<div>
  <h5>My Title</h5>
  <p>Content goes here</p>
</div>

We are using many utility classes to achieve a card. While this looks like a little more work upfront, the biggest benefit is that you can customize to your style quickly and easily .

Get Started with Tailwind CSS in 15 Minutes

Here's the CodePen . Here's a breakdown of the classes for the card:

background: #fff
border-radius: 0.25rem
0 1px 3px 0 rgba(0, 0, 0, .1), 0 1px 2px 0 rgba(0, 0, 0, .06)
border-width: 1px
padding: 1.5rem
width: 16rem

Here's the classes for the title:

font-size: 1.875rem
font-weight: 700
margin-bottom: .75rem
margin-top: 0

Here's the classes for the content:

color: #4a5568
font-size: .875rem

Tailwind CSS is an investment. If you want to write your CSS and design your apps faster, you're gonna have to put in the time to learn the classes; this is the same as any technology that you want to benefit from.

Will this make my HTML too busy?

This can be seen as writing inline styles. There are many strategies to moving these classes out of your HTML and making them reusable. Here are some tactics for cleaning up our Tailwind classes:

  • Using Sass and moving our classes out of HTML
  • Using JS components (React/Vue) and only having to write classes once

Here's an example of using the Tailwind @apply function to clean up your HTML:

.btn {
  @apply font-bold py-2 px-4 rounded;
}

.btn-blue {
  @apply bg-blue-500 text-white;
}

.btn-blue:hover {
  @apply bg-blue-700;
}

An approach that I personally like is keeping the classes in the template and then finding ways to make that template reusable. React components is a good example of this.

We'll talk about that more later. For now, we need to focus on how we can use Tailwind to build things.

What is Tailwind CSS?

Now that we've seen a quick example, let's dig deeper. Tailwind CSS is a CSS framework that may be different than what you've used in the past. When most people think of CSS frameworks, they usually think of the most popular one, Bootstrap , or any of the very popular ones like Foundation or Bulma .

Tailwind is a different type of framework. Instead of pre-built components, Tailwind provides utility classes.

Here are some types of classes Tailwind provides

When we talk about utility classes, we mean that we have a multitude of classes that we can use. These will link direclty to the Tailwind docs.

The Tailwind docs are very good at helping us find what we need. You'll find yourself browsing the docs often while you are learning the classes. A tip is to use the keyboard shortcut for / to focus the search bar.

The Benefits of Tailwind

You may be wondering, "why should we use a utility class framework that will make our HTML seem busier?"

Most CSS frameworks do too much.

When using Bootstrap or something similar, we'll have a lot pre-built classes like card , navbar , and more. As soon as we want to customize those things for our own projects, we'll have to write custom CSS and try to override the base styles.

This can lead to busy CSS where you are writing styles to undo styles!

Tailwind gives us a "use what you need" approach.

This benefit will be more apparent the more time you spend with the framework. Let's go over some benefits and build a few things.

Bundle Size

Tailwind on its own is a large CSS framework. This is because of how many utility classes come with it.

Get Started with Tailwind CSS in 15 Minutes

The big benefit is when we use a tool called Purgecss to control our file size . Purgecss will look at our HTML and find the Tailwind classes that are being used. Any classes that we don't use will be removed from our final CSS file/bundle.

We can remove all the classes that we aren't using. Our CSS could be as small as 13kb!

Easy to Customize

Tailwind allows us to customize everything about our classes. We can change the color palette, size of fonts, paddings, responsiveness, and more.

We can create a tailwind.config.js and write our config changes in there. Anything in this file will override the Tailwind default config .

// Example `tailwind.config.js` file

module.exports = {
  important: true,
  theme: {
    fontFamily: {
      display: ['Gilroy', 'sans-serif'],
      body: ['Graphik', 'sans-serif'],
    },
    extend: {
      colors: {
        cyan: '#9cdbff',
      },
      margin: {
        '96': '24rem',
        '128': '32rem',
      },
    }
  },
  variants: {
    opacity: ['responsive', 'hover']
  }
}

Quick to Responsive

We can write in responsiveness using the utlity classes Tailwind provides. I was never a fan of writing my own CSS to create responsive breakpoints.

With Tailwind, we can write our responsive styles by prefixing the utility classes with:

sm
md
lg
xl

Let's say we want a box to be blue at larger screens and red at smaller screens. We start with mobile and add the class for blue for larger screens:

<div>
    <p>i am red on small and medium devices</p>

    <p>i am blue on large and extra large devices</p>
</div>

Super Fast Prototyping (if you know CSS well)

My favorite feature of Tailwind is how fast I can create great designs in browser. Tailwind won't give you perfect designs. It just gives you the tools to quickly create. I've never considered myself a designer and I don't use tools like Figma. I'd rather jump right into the code and design in browser.

You need to know your CSS well if you want to use Tailwind.

Using Tailwind will make sure you know your CSS classes as it doesn't hide any of CSS behind component classes. If you use a Bootstrap card , you may not know what goes into that card class. When you use Tailwind, you'll know exactly what CSS you're getting.

We recreated a few things we found around the web with Tailwind. Check out those articles to see us quickly prototype with Tailwind.

Tailwind CSS is a different way of looking at your CSS. It provides a great foundation to quickly create any type of design you want.

It may take some getting used to, but I believe it's worth the effort.

You'll never need to override CSS framework classes again.

Stay tuned as we'll be building more things with Tailwind!

Like this article? Follow @chrisoncode on Twitter


以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

程序设计实践

程序设计实践

[美] Brian W. Kernighan、Rob Pike / 裘宗燕 / 机械工业出版社 / 2000-8 / 20.00元

这本书从排错、测试、性能、可移植性、设计、界面、风格和记法等方面,讨论了程序设计中实际的、又是非常深刻和具有广泛意义的思想、技术和方法。一起来看看 《程序设计实践》 这本书的介绍吧!

JSON 在线解析
JSON 在线解析

在线 JSON 格式化工具

Base64 编码/解码
Base64 编码/解码

Base64 编码/解码

UNIX 时间戳转换
UNIX 时间戳转换

UNIX 时间戳转换