A Tailwind CSS can understand the introduction

This article is intended for beginners who have never used Taliwind CSS. Taliwind CSS, an increasingly popular CSS framework, will be introduced by setting up a Tailwind CSS environment to explain basic setup and customization methods.

The current usage of Taliwind CSS is that the number of users is increasing and new functions are being added successively. The latest version is V3.0. Some of the things described in this document can also be set in v3.0 in a simpler way. However, basic information about the reveal Class did not change, so it provides information for learning basic information.

1. What is Tailwind CSS?

Tailwind CSS is a CSS framework that utilizes a common Class, a Utilize Class, a Utilize Class, a Utilize Class. Many people think of CSS frameworks, and there are many, such as Bootstrap, Bulma, and Material UI. Frameworks such as Bootstrap and Bulma are designed using pre-prepared components such as buttons, menus, and breadcrumbs. In Tailwind CSS, you don’t prepare any components; instead, you create and design your own components using a Flash Class.

Tailwind CSS also provides a Headless UI (headlessui.dev) that you can use if you want to create complex components (such as drop-down menus and dialog boxes).

It turns out that frameworks like Bootstrap can efficiently design a website by preparing a collection of components in advance, but they have the disadvantage of using the same design, so they are not original. In contrast, Tailwind CSS does not have a collection of components, so even if you create a component called the same button, everyone will use a different reveal Class to create it, which can create a highly original site.

Both have advantages and disadvantages, so it’s up to the individual to decide which one to use, but the number of people using Tailwind CSS is steadily increasing.

1.1. What is Utilize Class?

For example, if you want to create a button using Bootstrap, set class to BTN. In Tailwind, however, there is no such thing as a BTN class for creating buttons, you can create buttons by writing a flash class like the one shown below. You might think there are too many classes to set up, but it’s cheap to learn because you get used to it. If you don’t know the class name, you can easily find it by searching the Tailwind CSS documentation.

<button class="bg-indigo-700 font-semibold text-white py-2 px-4 rounded">Front-end evening class</button>
Copy the code

Bg-indigo -700 set the color, font-semibold set the font thickness, text-white set the text color, py-2 set the left and right fill, PX set the top and bottom fill, rounded corner.

The specified flash Class has no specific meaning in the flash Class itself (unlike Bootstrap Class BTN which represents a button). It can be used in various places (sometimes for buttons), sometimes for navigation links, etc. So it was named A Utility Class, Reveal Class. That is to say, a predefined Class in a Tailwind CSS is a predefined Class.

The community uses the term “low-level” in the interpretation of Tailwind’s Reveal Class, such as low-level styles, low-level utility classes, and low-level frameworks.

There are 9 different font sizes and a lot of colors in the Utilize Class, so you can design by just updating the HTML file instead of writing your own CSS styles.

If you want to use a color that isn’t registered in a Tailwind CSS reveal Class, you might want to know what to do. In this case you can use it in the same way as any other Tailwind CSS Reveal Class by registering it in the Tailwind CSS configuration file.

In the current version, you can use brackets to set fixed values such as text-[#121212] and W -[100px] even if you did not register them in the reveal Class, without describing them in the configuration file. For those that are used frequently, it is more efficient to continue to set them up in the configuration file.

1.2 Why Tailwind CSS?

After reading this, you might be wondering if you should write using the style attribute without Tailwind CSS? Using Tailwind CSS has some advantages over the style attribute.

With Tailwind CSS, you can easily set up a responsive design using a Flash Class, so you don’t have to set up media queries. Once you get used to Tailwind CSS, you forget to use media queries. In addition, Settings such as hover and focus, which are pseudo-classes, cannot be set using the style property, but in Tailwind CSS, pseudo-classes can be set using classes. You can also use CSS for animations and gradients of colors using Flash Class.

Set up the environment

Use the CDN method

When using the CDN, paste the following link tags into the HTML.

<link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet">
Copy the code

Please note that if you use CDN, you will not be able to customize Tailwind CSS, which is covered later in this document, such as adding colors.

Install the Tailwind CSS using NPM/YARN

You cannot customize Tailwind CSS using CDN. To customize, use NPM and YARN to install Tailwind CSS.

 $ npm init -y
 
 $ npm install tailwindcss@latest
Copy the code

Next, create a CSS directory and create a style.css file in it. Add the following three tailwind directives to the style.css file. This style.css cannot be read directly from HTML. So we’ll build it later and turn it into a FAMILIAR HTML readable CSS file. By building, Tailwindcss uses a Utilize Class that is extracted from the base, components, and utilities.

@tailwind base;
@tailwind components;
@tailwind utilities;
Copy the code

Create a public/ CSS directory to store the CSS files created after the build.

Let’s actually build and create a CSS file to read the HTML from the style.css file with the Tailwind directive added.

$% NPX tailwind build./ CSS /style.css -o./public/ CSS /style.css tailwind 2.1.2 🚀 Building: CSS /style. CSS ✅ Finished in 2.61 s 📦 Size: 3.81MB 💾 Saved to public/ CSS /style. CSSCopy the code

You can see that the CSS file created contains regular CSS. Because all of the predefined classes that Twailwind created had descriptions of Utilize classes, the file was very large, with 50,000 or more lines.

/ *! Tailwindcss v2.1.2 | MIT License | https://tailwindcss.com * /

/ *! Modern - normalize v1.1.0 | MIT License | https://github.com/sindresorhus/modern-normalize * /

/*
Document
========
*/

/**
Use a better box model (opinionated).
*/

*,
::before.::after {
  box-sizing: border-box;
}
Copy the code

You can also see modern canonicalization applied to the top of the style.css file you created.

Using the NPX command to build, you can add the build command to the package.json file


"scripts": {
  "build": "tailwind build css/style.css -o public/css/style.css"
},
Copy the code

This completes the setup for Tailwind CSS.

How to use Tailwind CSS

Hello Tailwind CSS

Now that you have built an environment to use Tailwind, create the following index.html file in the public directory. Use the link tag to specify the built style.css.

<! DOCTYPEhtml>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="Width = device - width, initial - scale = 1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="css/style.css">
    <title>Document</title>
</head>
<body>
    <h1>Hello Tailwind CSS</h1>
</body>
</html>
Copy the code

Open the browser and the following information is displayed:

Decorate text with a Reveal Class. Set four utility classes: font size, color, position, and weight.

<h1 class="text-4xl text-green-700 text-center font-semibold">Hello Tailwind</h1>
Copy the code

Let’s start with the reveal Class, which we often use.

Character size Settings

To set the font size, use text- {size}. The size can take on 13 values. The corresponding CSS styles are in parentheses.

.text-xs(Font size:75rem;).text-sm(Font size:875rem;).text-base(Font size:1rem;).text-lg(Font size:1.125 rem;).text-xl(Font size:1.25 rem;).text-2xl(Font size:1.5 rem;).text-3xl(Font size:1.875 rem;).text-4xl(Font size:2.25 rem;).text-5xl(Font size:3rem;).text-6xl(Font size:4rem;).text-7xl(Font size:4.5 rem;).text-8xl(Font size:6rem;).text-9xl(Font size:8rem;)Copy the code

When actually applied to HTML, it would look like this:

<div class="text-center mt-10">
    <p class="text-xs">Front-end evening class</p>
    <p class="text-sm">Front-end evening class</p>
    <p class="text-base">Front-end evening class</p>
    <p class="text-lg">Front-end evening class</p>
    <p class="text-xl">Front-end evening class</p>
    <p class="text-2xl">Front-end evening class</p>
    <p class="text-3xl">Front-end evening class</p>
    <p class="text-4xl">Front-end evening class</p>
    <p class="text-5xl">Front-end evening class</p>
    <p class="text-6xl">Front-end evening class</p>
</div>
Copy the code

The character thickness is set

To set the character thickness, use font- {thickness}. There are nine values for thickness. The corresponding CSS styles are in parentheses.

.font-thin (font-weight: 100;)
.font-extralight (font-weight: 200;)
.font-light (font-weight: 300;)
.font-normal (font-weight: 400;)
.font-medium (font-weight: 500;)
.font-semibold (font-weight: 600;)
.font-bold(font-weight:700;).font-extrabold(font-weight:800;).font-black(font-weight:900;)Copy the code

<div class="text-center mt-10">
    <p class="font-thin">Front-end evening class</p>
    <p class="font-extralight">Front-end evening class</p>
    <p class="font-light">Front-end evening class</p>
    <p class="font-normal">Front-end evening class</p>
    <p class="font-medium">Front-end evening class</p>
    <p class="font-semibold">Front-end evening class</p>
    <p class="font-bold">Front-end evening class</p>
    <p class="font-extrabold">Front-end evening class</p>
    <p class="font-black">Front-end evening class</p>
</div>
Copy the code

Text color Settings

To set the text color, use text- {color}-{color depth}. The color can be white, black, red, blue, indigo blue… And so on. Color intensity can take on 9 values. For example, in the green case, as shown below.

text-green-100(color: # f0fff4;) text-green-200(color:#c6f6d5;) text-green-300(color:#9ae6b4;) text-green-400(color:#68d391;) text-green-500(color:#48bb78;) text-green-600(color:#38a169;) text-green-700(color:#2f855a;) text-green-800(color:# 276749;) text-green-900(color:#22543d;)Copy the code

If you want to change the text color to red instead of green, you can change it as text-red-500 does. If you want to change the background color, you can do so using BG-RED-500.

<div class="text-center mt-10">
    <p class="text-green-100">Front-end evening class</p>
    <p class="text-green-200">Front-end evening class</p>
    <p class="text-green-300">Front-end evening class</p>
    <p class="text-green-400">Front-end evening class</p>
    <p class="text-green-500">Front-end evening class</p>
    <p class="text-green-600">Front-end evening class</p>
    <p class="text-green-700">Front-end evening class</p>
    <p class="text-green-800">Front-end evening class</p>
    <p class="text-green-900">Front-end evening class</p>
</div>
Copy the code

Utility classes such as margins, padding, and Flexbox can also be used. You can view each Reveal Class in the official document.

Create button

Now you know what a Utilize Class looks like, let’s create a button that utilizes a Utilize Class.

<button class="bg-indigo-700 font-semibold text-white py-2 px-4 rounded">Front-end evening class</button>
Copy the code

In py-2, the top and bottom are.5REM padding, and in Px-4, the left and right are 1REM padding. In the circle, the boundary radius.25rem is applied and the Angle is rounded.

Tailwind CSS custom

Because buttons are a reusable component, and you want to create a uniform design in your application, you can register the Reveal Class set to create buttons as another Class.

Open the pre-built CSS/style. CSS file and add the following between the @Components and @Utility directives.

@tailwind base;

@tailwind components;

.btn{
    @apply font-semibold text-white py-2 px-4 rounded;
}

@tailwind utilities;
Copy the code

And then rebuild it, NPM run build,

Public/CSS /style.css will be overwritten, so open the style.css file and search for BTN

You can see that what you just added with @apply has been added as CSS to the style.css file,

.btn{
  font-weight: 600;
  color: #fff;
  padding-top: 0.5 rem;
  padding-bottom: 0.5 rem;
  padding-left: 1rem;
  padding-right: 1rem;
  border-radius: 0.25 rem;
}
Copy the code

Created using the BTN class and the added button, change the background color only to red.

<div class="text-center mt-10">
    <button class="bg-indigo-700 font-semibold text-white py-2 px-4 rounded">Front-end evening class</button>
    <button class="bg-red-700 btn">Front-end evening class</button>
</div>
Copy the code

Pseudo class sets hover

Learn how to execute pseudo classes by hovering in Tailwind to change the color of a button when the cursor hovers over it. If you want to change the color, set the color after you hover and the Settings will show up.

<button class=" bG-red-700 BTN hover:bg-red-500">Copy the code

Pseudo-classes set the focus

The focus is also set when the button is clicked. For clarity, change the corner from rounded to round to emphasize the roundness of the button. Modify the @ the apply

@tailwind base;

@tailwind components;
.btn{
    @apply font-semibold text-white py-2 px-4 rounded-full;
}
@tailwind utilities;
Copy the code

When the button is selected (using tabs), a box is displayed. A box appears when you click, so we erase the box by setting focus.

When I set focus to no outline, the outer box disappears, but I don’t know if the button is selected.

<button class="bg-red-700 btn hover:bg-red-500 focus:outline-none">Front-end evening class</button>
Copy the code

Set the shadow outline so that you can see the button selected. If you set it, a shadow will be created along the button, so the user won’t feel any discomfort.

<button class="bg-red-700 btn hover:bg-red-500 focus:outline-none focus:shadow-outline">Front-end evening class</button>
Copy the code

The transition is set

I confirmed that I could change the color of the button when the cursor moved over it by setting the hover of the pseudo class. When the cursor hovers over the button, you can see the color. You can slowly change the color of the button by using transitions. By setting duration-1000, the color changes slowly for 1 second. Multiple values of duration from duration-75 to duration-1000 are registered.

<button class="bg-indigo-700 font-semibold text-white py-2 px-4 rounded hover:bg-red-700 duration-1000">Front-end evening class</button>
Copy the code

Change Settings

If you want to make the button itself bigger and change the color of the button by hovering, you can use transform and Scaling to do this.

<button class="bg-indigo-700 font-semibold text-white py-2 px-4 rounded transform hover:scale-110 hover:bg-red-700 duration-1000">Front-end evening class</button>
Copy the code

Group set up

So far in the Hover setting, changes to hovers occur on the target element when the cursor passes over it, but in the Group setting, hover effects occur on the child element that sets the hover when the cursor passes over the parent element.

In the example below, when the cursor passes over the parent element with the group set, the text color of one P tag element changes to red and the other to blue due to the hover setting set for the child element.

<div class="group m-10 p-10 border hover:bg-gray-100">
  <p class="font-black group-hover:text-red-900">Front-end evening class</p>
  <p class="font-black group-hover:text-blue-900">Front-end evening class</p>
</div>
Copy the code

Animation Settings

By simply setting animate-bounce and animate- Pulse to class, you can easily set up animations without setting up complex CSS.

Tailwind.confing.js configuration file

Creating a Configuration File

Using a Tailwind CSS, you can customize a Tailwind CSS by adding colors, margins, widths, etc. that are not included in a Tailwind CSS reveal Class. Customization requires a configuration file, but it is not created by default, so you use commands to create it.

% npx tailwind init
  
   tailwindcss 2.1.2
  
   ✅ Created Tailwind config file: tailwind.config.js
Copy the code

The command above will create a tailwind.config.js file.

Adding color

module.exports = {
  theme: {
    extend: {
      colors: {
        cyan: '#9cdbff',}}},variants: {},
  plugins: []}Copy the code

Even without a configuration file, you can set colors that are not commonly used in your application by enclosing them in parentheses, such as bg-[# 9cDBFF].

After adding, build, NPM run build

Change the button color from red to cyan. Since cyan was added without setting the color depth, set it to BG-cyan (from BG-RED-700 to Bg-cyan).

<button class=" bG-cyan BTN hover: bG-red-500 focus: outlier-none focus:shadow ">Copy the code

Add the maximum width and add the spacing

You can use max-width to set the maximum width of elements on the browser, but you may want to set it to a different width than the default registered width in Tailwind CSS. In this case, make other Settings in tailwind.config.js as well as colors.

theme: {
    extend: {
        colors: {'cyan':'#9cdbff',},maxWidth: {custom:'60rem',}},variants: {},
    plugins: []},Copy the code

When used in the class property, set max-w-custom.

You can use spacing to set the width.

theme: {
    extend: {
        colors: {'cyan':'#9cdbff',},maxWidth: {custom:'60rem',},spacing: {76: '19rem',}},variants: {},
    plugins: []},Copy the code

When used in the class property, set to W-76.

Even if you don’t use configuration files, you can set a description like P -[19REM] for styles you don’t use very often.

Add font size

The smallest font size class is text-xs, but if you want to add a smaller font size class, you can do so.

theme: { extend: { colors:{ 'cyan':'#9cdbff', }, maxWidth:{ custom:'60rem', }, spacing:{ 76: '19 rem'}, fontSize: {XXS: [' 0.625 em '{lineHeight:' 1 rem '}],},}, variants: {}, plugins: []},Copy the code

If you want to use it, set text-xxs in the class property.

How do I customize other values

I explained how to add color, maximum width, width, and font size, but when I want to add box shadows, where should I look for Settings, for example?

First, turn to the official Tailwind CSSDocuments and searches.

The Box Shadow page displays when you search through the document.

Box shadow page

When you scroll, you’ll find the custom. The default registered value in the Tailwind CSS will be displayed there, so if you want to set it with a value that is not included, please add it to the Tailwind.config.js file according to the Settings shown.

Tailwind CSS plugin Settings

Tailwind CSS comes with some official plugins. Let’s examine how to set up tailwindcss/line-clamp, which is one of the plug-ins.

When a long sentence like the one below is displayed on the browser, it also displays multiple lines on the browser.

<div class="m-20">
  <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Suscipit a in ad voluptatem necessitatibus et laborum, minus amet aliquid pariatur fugit recusandae neque illum voluptatibus repellendus est natus harum modi maxime eos aliquam eum ratione tempore? Sapiente nam corrupti odio quibusdam dolore harum consequatur sint mollitia at? Voluptas quae eligendi quia omnis porro totam laudantium dolorum. Ipsum quasi cupiditate expedita! Dolor ut voluptatibus quos ipsa beatae, accusamus, a incidunt provident, delectus tempore id ex placeat quo laboriosam iusto velit animi molestiae dignissimos sint perspiciatis quis accusantium  maxime corrupti. Repellat hic error in totam consequuntur non magni maiores quibusdam quidem cum.</div>
</div>
Copy the code

If you only want to see the first few lines and not all of them, you can use the plug-in tailwindcss/line-clamp.

% npm install @tailwindcss/line-clamp
Copy the code

After the installation is complete, you need to register the installation package information in tailwind.config.js.

    plugins: [
        require('@tailwindcss/line-clamp'),
    ],
Copy the code

After setting up, you will need to build. Run NPM run build. Once the build is complete, the setup to use the plug-in is complete.

Line-clamp Sets the number of lines to be displayed after line-clamp is set, as shown below.

<div class="m-20">
  <div class="line-clamp-3">Lorem Ipsum Dolor sit amet, consectetur adipisicing elit. Suscipit a in AD Voluptatem // Omitted</div>
</div>
Copy the code

Only 3 rows with Line-CLAM-3 configured can be displayed.

Now that we know what Tailwind CSS is? How to build a Tailwind CSS environment and use it? Tailwind CSS customization and the use of plug-ins, I believe you have a comprehensive understanding of Tailwind CSS, the next is to start writing.