Getting Started with Tailwind CSS Tutorial

---

---

I. Introduction

Tailwind CSS - Rapidly build modern websites without ever leaving your HTML.

Tailwind is a CSS framework. Its main feature is that it provides a series of CSS classes, which can quickly build various styles. Tailwind's development history dates back to 2017 and was co-founded by Adam Wathan, Steve Schoger and Jonathan Reinink. The design concept of Tailwind is to provide a series of atomic classes, each class contains only a specific style, and complex styles can be constructed by combining these classes. This design concept allows developers to control styles more flexibly, while reducing style redundancy and improving code maintainability.
Key features of Tailwind include:

• A series of atomic classes are provided to quickly build various styles.
• You can customize styles through configuration files, including colors, fonts, borders, etc.
• Support responsive design, you can apply different styles according to different screen sizes.
• Support plug-in mechanism, which can extend the function of the framework.
• Provides some useful tool classes, such as layout class, spacing class, text class, etc., which can help developers build pages faster.

In general, Tailwind is a very practical CSS framework that can help developers build pages faster and improve code maintainability.

Project source code : tailwind

Second, the basic course

2.1 Color

white, black, red, green, blue, orange, yellow, purple, lime, emerald, teal, cyan, indigo, violet, fuchsia, pink, rose, sky, gray, slate, zinc, neutral, stone, amber

<!-- Default colors -->
    <!-- white, black, red, green, blue, orange, yellow, purple, lime, emerald, teal, cyan, indigo, violet, fuchsia, pink, rose, sky, gray, slate, zinc, neutral, stone, amber,  -->

    <!-- Text Colors -->
    <p class="text-black">Tailwind is awesome</p>
    <p class="text-red-50">Tailwind is awesome</p>
    <p class="text-red-100">Tailwind is awesome</p>
    <p class="text-red-200">Tailwind is awesome</p>
    <p class="text-red-300">Tailwind is awesome</p>
    <p class="text-red-400">Tailwind is awesome</p>
    <p class="text-red-500">Tailwind is awesome</p>
    <p class="text-red-600">Tailwind is awesome</p>
    <p class="text-red-700">Tailwind is awesome</p>
    <p class="text-red-800">Tailwind is awesome</p>
    <p class="text-red-900">Tailwind is awesome</p>

    <!-- Background Colors -->
    <div class="bg-slate-600">
      <p class="text-white">Tailwind is awesome</p>
    </div>
    <div class="bg-zinc-400">
      <p class="text-white">Tailwind is awesome</p>
    </div>
    <div class="bg-emerald-600">
      <p class="text-white">Tailwind is awesome</p>
    </div>

    <!-- Text Underline -->
    <p class="underline text-red-700 decoration-red-700">Tailwind is awesome</p>
    <p class="underline text-blue-700 decoration-blue-700">
      Tailwind is awesome
    </p>

    <!-- Border Colors -->
    <input class="border-2 border-rose-500" />
    <input class="border-2 border-blue-300" />
    <input class="border-2 border-purple-900" />
    <input class="border-2 border-yellow-500" />

    <!-- Divide Colors -->
    <div class="divide-y divide-blue-200">
      <div>Item 1</div>
      <div>Item 2</div>
      <div>Item 4</div>
      <div>Item 5</div>
      <div>Item 6</div>
    </div>

    <!-- Outline Colors -->
    <button class="outline outline-blue-500">Subscribe</button>
    <button class="outline outline-purple-300">Subscribe</button>
    <button class="outline outline-gray-500">Subscribe</button>

    <!-- Box Shadow Colors (Opacity defaults to 100, but you cans set it)-->
    <button class="bg-cyan-500 shadow-lg shadow-cyan-500">Subscribe</button>
    <button class="bg-blue-500 shadow-lg shadow-blue-500/50">Subscribe</button>
    <button class="bg-indigo-500 shadow-lg shadow-indigo-500/50">
      Subscribe
    </button>

    <!-- Accent Colors -->
    <input type="checkbox" class="accent-purple-500" checked /> Option 1
    <input type="checkbox" class="accent-pink-500" checked /> Option 2
    <input type="checkbox" class="accent-red-300" checked /> Option 3

    <!-- Arbitrary Colors -->
    <div class="bg-[#427fab] h-10">Hello</div>
    <div class="text-[#427fab] h-10">Hello</div>
    <div class="border border-[#427fab] h-10">Hello</div>

2.2 Margins

2.2.1 container

container	None	width: 100%;
sm (640px)	    max-width: 640px;
md (768px)	    max-width: 768px;
lg (1024px)	    max-width: 1024px;
xl (1280px)	    max-width: 1280px;
2xl (1536px)	  max-width: 1536px; 

2.2.2 margin

    <div class="bg-slate-100 m-2">Hello Tailwind</div>
    <div class="bg-slate-100 mx-10">Hello Tailwind</div>
    <div class="bg-slate-100 my-10">Hello Tailwind</div>
    <div class="bg-slate-100 ml-4">Hello Tailwind</div>
    <div class="bg-slate-100 mt-4">Hello Tailwind</div>
    <div class="bg-slate-100 mr-4">Hello Tailwind</div>
    <div class="bg-slate-100 mb-4">Hello Tailwind</div>
    <div class="bg-slate-100 mt-[20px]">Hello Tailwind</div>

• Value m-1 margin: 0.25rem; /* 4px */ Default value, can be modified 1rem = 16px

2.2.3 padding

  <div class="bg-slate-100 p-2">Hello Tailwind</div>
  <div class="bg-slate-100 px-10">Hello Tailwind</div>
  <div class="bg-slate-100 py-10">Hello Tailwind</div>
  <div class="bg-slate-100 pl-4">Hello Tailwind</div>
  <div class="bg-slate-100 pt-4">Hello Tailwind</div>
  <div class="bg-slate-100 pr-4">Hello Tailwind</div>
  <div class="bg-slate-100 pb-4">Hello Tailwind</div>
  <div class="bg-slate-100 pt-[20px]">Hello Tailwind</div>

2.2.4 space

    <!-- Space Between X -->
    <div class="flex mt-10 space-x-24">
      <div>item 1</div>
      <div>item 2</div>
      <div>item 3</div>
      <div>item 4</div>
      <div>item 5</div>
      <div>item 6</div>
      <div>item 7</div>
    </div>
    <!-- Space Between Y -->
    <div class="flex flex-col mt-10 space-y-4">
      <div>item 1</div>
      <div>item 2</div>
      <div>item 3</div>
      <div>item 4</div>
      <div>item 5</div>
      <div>item 6</div>
      <div>item 7</div>
    </div>

2.3 Typesetting

Font Family
https://fonts.google.com/

	<script>
    tailwind.config = {
      
      
      theme: {
      
      
        fontFamily: {
      
      
          sans: ['ui-sans-serif', 'system-ui'],
          serif: ['ui-serif', 'Georgia'],
          mono: ["ui-monospace", "SFMono-Regular"],
          custom: ['Roboto']
        }
      }
    }
  </script>

• Font Family can use built-in fonts or custom fonts
• Font Size Set the size of the text
• Font Weight Set the thickness of the text
• Letter Spacing Set the text spacing
• Text Alignment Set text left, center, right
• Text Decoration is used to set the decoration effect of the text, such as underline, strikethrough, overline, etc.
• Decoration Style set style
• Decoration Offset is used to set the distance between the text decoration line and the text itself
• Text Transform is used to set the case conversion method of text

2.4 Dimensions

• Set the width and height of the element w-8 h-8
• w-screen sets the viewport w-full to 100%
• Maximum and minimum size can be set

2.5 Positioning

• childless father
• inset-y-0 means top 0 bottom 0
• Floating elements left right (less used)
• display: block;: Display the element as a block-level element, that is, the element will occupy a single line on the page, and attributes such as width, height, inner margin, and outer margin can be set. Commonly used for container elements in page layout, such as div, p, h1, etc.
• display: inline-block;: Display the element as an inline block-level element, that is, the element will be displayed in one line, and attributes such as width, height, inner margin, and outer margin can be set. Commonly used for container elements in page layout, such as button, input, etc.
• display: inline;: Display the element as an inline element, that is, the element will be displayed in one line, and properties such as width, height, inner margin, and outer margin cannot be set. Commonly used for text elements in the page, such as a, span, em, etc.

2.6 Shadows

color gradient

<!-- Gradients -->
  <div class="h-24 bg-gradient-to-r from-cyan-500 to-blue-500"></div>
  <div class="h-24 bg-gradient-to-r from-indigo-500 via-purple-500 to-pink-500"></div>

  <div class="w-96 mt-6 ml-4 p-3 shadow-xl shadow-blue-500/50">
    Lorem, ipsum dolor sit amet consectetur adipisicing elit. Mollitia minus
    deleniti iusto delectus alias natus quam dolor explicabo quas eius!
  </div>

• In Tailwind CSS, you can use the shadow class name to set the shadow effect of the element
• The shadow class name can be used with the following modifiers for finer control over the size and color of the shadow

2.7 Border

• Border can set size, color, orientation, corner, border offset

2.8 filter (filter)

In CSS, you can use the filter property to add filter effects to elements. Commonly used filter properties include:

• blur(): used to add a Gaussian blur effect to the element, where the value in brackets represents the blur radius, and the value ranges from 0 to positive infinity.
• Brightness(): Used to add brightness effects to elements, where the value in brackets represents the brightness value, and the value ranges from 0 to positive infinity.
• contrast(): It is used to add a contrast effect to the element, where the value in brackets represents the contrast value, and the value range is from 0 to positive infinity.
• grayscale(): Used to add a grayscale effect to the element, where the value in brackets represents the grayscale value, and the value ranges from 0 to 1.
• hue-rotate(): Used to add a hue rotation effect to the element, where the value in brackets represents the rotation angle, and the value range is from 0 to 360 degrees.
• invert(): It is used to add an inverted color effect to the element, where the value in brackets indicates the degree of inverted color, and the value ranges from 0 to 1.
• opacity(): Used to add transparency effects to elements, where the value in brackets represents the transparency value, and the value ranges from 0 to 1.
• saturate(): used to add a saturation effect to the element, where the value in brackets represents the saturation value, and the value range is from 0 to positive infinity.
• sepia(): Used to add a brown effect to the element, where the value in brackets represents the brown value, and the value ranges from 0 to 1.

It should be noted that filter properties can be used in combination to achieve more complex effects.

3. Under the basic tutorial

3.1 Pseudo-class elements

• In Tailwind CSS, you can use pseudo-class elements to add special styles to elements. Commonly used pseudo-class elements include :hover, :focus, :active, etc.
• Parent-child elements can be automatically triggered downwards through the group attribute
• appearance-none resets default element styles
• resize is a property in CSS that controls whether an element can be resized by the user
• Smooth Scroll smooth transition properties

3.2 Media Queries

    sm	640px	  @media (min-width: 640px) { ... }
    md	768px	  @media (min-width: 768px) { ... }
    lg	1024px	@media (min-width: 1024px) { ... }
    xl	1280px	@media (min-width: 1280px) { ... }
    2xl	1536px	@media (min-width: 1536px) { ... }

• In CSS, you can use media queries (Media Queries) to set different styles for different devices according to the characteristics of the device (such as screen width, height, resolution, etc.)
• Tailwind uses the more convenient md: class name method for adaptation

3.3 Columns

columns is a class name used to create the grid layout. The columns classname can be combined with numbers (1 to 12) for finer control over the number of columns in the grid.

3.4 flex layout

• Similar to the layout used by css, you can set columns and rows. Use order to set the direction of the element twice

Flex Layout Grammar Tutorial | Novice Tutorial

• flex-none: Set the flex attribute of the element to none, indicating that the element will not change in size with the size of the container, that is, no stretching will occur.
• flex-initial: Set the flex property of the element to 0 1 auto, indicating that the element can be reduced but not enlarged, and the initial size of the element will be considered.
• flex-auto: Set the flex attribute of the element to 1 1 auto, indicating that the element can automatically expand and contract according to the size of the container, while considering the initial size of the element.
• flex-1: Set the flex property of the element to 1 1 0%, indicating that the element can automatically expand and contract according to the size of the container, while ignoring the initial size of the element.

3.5 grid layout

<div class="grid grid-cols-1 md:grid-cols-3 gap-4 bg-gray-300 ">
    <div class="p-10 border border-blue-600 bg-blue-100 md:row-span-2 md:col-span-2">item 1</div>
    <div class="p-10 border border-blue-600 bg-blue-100">item 2</div>
    <div class="p-10 border border-blue-600 bg-blue-100">item 3</div>
    <div class="p-10 border border-blue-600 bg-blue-100">item 4</div>
    <div class="p-10 border border-blue-600 bg-blue-100">item 5</div>
    <div class="p-10 border border-blue-600 bg-blue-100">item 6</div>
    <div class="p-10 border border-blue-600 bg-blue-100 md:row-span-2  md:col-span-2">item 7</div>
    <div class="p-10 border border-blue-600 bg-blue-100">item 8</div>
    <div class="p-10 border border-blue-600 bg-blue-100">item 9</div>
    <div class="p-10 border border-blue-600 bg-blue-100 md:col-span-3">item 10</div>
  </div>

• grid-col sets the global column, grid-row sets the global row
• col-span sets how many current elements can occupy, and row-span is the same

3.6 Animation

//自定义数值
<script>
    tailwind.config = {
      
      
      theme: {
      
      
        extend: {
      
      
          transitionDuration: {
      
      
            0: '0ms',
            5000: '5000ms',
          },
        },
      },
    }
  </script>

The transition class of Tailwind CSS is a class used to set CSS transition effects. It allows elements to smoothly transition to a new state when the state changes, rather than abruptly.
The transition class can be used to set transition effects for the following CSS properties:

• opacity: the opacity of the element
• background-color: the background color of the element
• border-color: the border color of the element
• box-shadow: the shadow effect of the element
• transform: the transformation effect of the element, such as rotation, scaling, displacement, etc.

The transition class can be combined with other Tailwind CSS classes to set transition durations, speed curves, delays, and more. For example, you can use the duration-500 class to set the duration of the transition effect to 500 milliseconds, use the ease-in-out class to set the speed curve to ease in and out, and use the delay-100 class to set a delay of 100 milliseconds before starting the transition effect.

3.7 Keyframes

<script>
    tailwind.config = {
      
      
      theme: {
      
      
        extend: {
      
      
          animation: {
      
      
            'spin-slow': 'spin 3s linear infinite',
            'wiggle': 'wiggle 1s ease-in-out infinite',
          },
          keyframes: {
      
      
            wiggle: {
      
      
              '0%, 100%': {
      
       transform: 'rotate(-12deg)' },
              '50%': {
      
       transform: 'rotate(12deg)' },
            },
          }
        }
      }
    }
  </script>

• The animate class of Tailwind CSS is a class used to set CSS animation effects. It allows elements to animate to a new state when the state changes, thereby enhancing the interactivity and visual effect of the page.
• Built-in a variety of effects, you can customize or modify existing effects

3.8 Localization

  <script>
    tailwind.config = {
      
      
      theme: {
      
      
        screens: {
      
      
          'sm': '600px',
          'md': '800px',
          'lg': '1024px',
          'xl': '1280px',
          '2xl': '1536px',
        },
        extend: {
      
      
          colors: {
      
      
            'purple': '#3f3cbb',
            'midnight': '#121063',
            'metal': '#565584',
          },
          spacing: {
      
      
            '6': '2rem',
          },
          borderRadius: {
      
      
            '4xl': '2rem',
          },
        }
      }
    }
  </script>

3.9 Theme switching

• The dark mode of Tailwind CSS is a feature for switching between light and dark themes in a website or application. It allows users to choose a suitable theme based on their preferences or the brightness of the ambient light, improving user experience and usability.
• It should be noted that in order to realize the dark mode, it is necessary to add the class="dark" attribute to the HTML body element.

4. Development environment settings

4.1 Basic steps

Installation - Tailwind CSS

Develop using Tailwind CLI tool

4.2 Modify configuration

{
    
    
  "name": "tailwind-starter",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    
    
    "test": "echo \"Error: no test specified\" && exit 1",
    "watch": "tailwindcss -i ./src/input.css -o ./css/style.css --watch",
    "build": "tailwindcss -i ./src/input.css -o ./css/style.css"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    
    
    "tailwindcss": "^3.3.3"
  }
}

• watch has been monitoring input.css changes, refactoring and generating style.css
• build development is completed and finally packaged

4.3 Style customization

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base{
    
    
  h1 {
    
    
    font-size: 3rem;
  }

  h2 {
    
    
    @apply text-2xl text-sky-500 font-bold mt-10;
  }

}

@layer components{
    
    
  .btn-blue {
    
    
    @apply bg-blue-500 text-white font-bold py-2 px-4 rounded m-10;
  }
}


.text-area{
    
    
  @apply bg-gray-200 border-2 border-gray-400 rounded-lg p-4;
  height: theme('spacing.128');
}