What is Tailwind CSS?

Small knowledge, big challenge! This article is participating in the creation activity of “Essential Tips for Programmers”.

preface

Bootstrap,BootMetro, Muse UI, etc. So today I would like to introduce a popular framework full of design sense -Tailwind CSS.

Tailwind CSS is a CSS style library that gives us all the building blocks we need to build custom designs without using custom styles and is a popular framework abroad.

Tailwind provides a design-conscious and utility-oriented ability to create components, which is ideal for providing beautiful and useful class names to build web sites, and it adds dark mode out of the box, configuration free, in the latest version 2.0.

Tailwind automatically removes all unused CSS when building production files, so it is very small in real production, it is considered one of the most designable CSS libraries out there, and even though it is forked, we are not doing anything about it

How Tailwind differs from other style libraries

1. Can be customized

In the tailwind.config.js configuration file, you can customize your project’s palette color, spacing spacing, font fontFamily, breakpoints, borderRadius values, and more.

// tailwind.config.js
module.exports = {
  theme: {
    colors: {
        blue: {
            light: '#85d7ff'.DEFAULT: '#1fb6ff'.dark: '#009eeb',},pink: {
            light: '#ff7ce5'.DEFAULT: '#ff49db'.dark: '#ff16d1',},gray: {
            darkest: '#1f2d3d'.dark: '#3c4858'.DEFAULT: '#c0ccda'.light: '#e0e6ed'.lightest: '#f9fafc',}},fontFamily: {
      sans: ['Graphik'.'sans-serif'].serif: ['Merriweather'.'serif'],},extend: {
      spacing: {
        '128': '32rem'.'144': '36rem',},borderRadius: {
        'xl': '0.5 rem'.'2xl': '1rem'.'3xl': '1.5 rem'.'4xl': '2rem',}}}}Copy the code

2. The response type

Tailwind provides breakpoints for users to configure responsive layouts for different devices. The default breakpoint is the resolution of common devices

// tailwind.config.js
module.exports = {
  theme: {
    screens: {
      '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) { ... }}}}Copy the code

It gives the user Settings to display different layouts in different device sizes, such as this small example:

<div class="w-20 h-20 bg-red-200 sm:bg-blue-500 md:bg-yellow-500"></div>
Copy the code

It shows a 5rem(80px) wide, 2.5rem(40px) high device with a pink BG-Red-200 color when the device is less than 640px wide

The device width between 640px and 768px is blue sm: BG-blue-500

The color is orange when the device width is greater than 768pxmd:bg-yellow-500

3. Extract shared attributes

If you think it’s too messy to write so many classes on a tag, you can use the special @apply syntax to extract attributes, such as the class in the div:

/* index.css */

/ *! @import */
@tailwind base;
@tailwind components;
@tailwind utilities;

.box {
  @apply w-20 h-20 bg-red-200 sm:bg-blue-500 md:bg-yellow-500
}
Copy the code

Then you just add the box attribute to the div

<div class="title"></div>
Copy the code

Use Tailwind CSS in Vue3+Vite projects

Create a Vite project

npx create-vite-app vite_vue3
Copy the code

cd vite_vue3
npm install
Copy the code

Install Tailwind and other dependencies:

npm install -D tailwindcss@npm:@tailwindcss/postcss7-compat @tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9
Copy the code

Creating a Configuration File

npx tailwindcss init -p
Copy the code

Configure Tailwind to remove style declarations that are not used in production

// tainwind.config.js
module.exports = {
    purge: ['./index.html'.'./src/**/*.{vue,js,ts,jsx,tsx}'].darkMode: false.// or 'media' or 'class'
    theme: {
      extend: {},},variants: {
      extend: {},},plugins: [],}Copy the code

Introduce Tailwind in CSS

/* index.css */

/ *! @import */
@tailwind base;
@tailwind components;
@tailwind utilities;
Copy the code

Please make sure to include /*! Due to bugs in Chromium @import */ comments to avoid performance issues in Chrome DevTools at development time.

Import the index.css file in main.js

// main.js
import { createApp } from 'vue'
import App from './App.vue'
import './index.css'

createApp(App).mount('#app')
Copy the code

Now that we’re done with tailwind, let’s try it out

What is Tailwind CSS?

preface