What is a tailwindcss?

Before explaining tailwindcss, let’s take a look at its predecessor, atomic CSS

Atomic CSS is atomic CSS, which advocates and provides a set of atomic classes with names that are short for their corresponding CSS

Such as:

class=”mt-20″ => .mt-20 { margin-top: 20px; }

class=”flex” => .flex { display:flex; }

class=”hover:bg-red” => .hover:bg-red:hover { background:red; }

So one might say, what’s the difference between atomic CSS and inline style?

• Atomic CSS can support pseudo-classes, pseudo-elements, and even media queries, whereas inline styles do not
• Atomic CSS has an inline style abbreviation for faster development
• Atomic CSS is a class name, so its content can be customized, whereas inline styles cannot be changed dynamically after being written

But the drawbacks of atomic CSS have been around for seven years

Tailwindcss is based on atomic CSS, but it makes up for atomic CSS

• Through configuration files, theme and base values can be customized, which greatly extends flexibility
• Tree-shaking filters unreferenced CSS classes to reduce production volume
• Postcss makes it perfectly compatible with other CSS preprocessors

The 2020 CSS framework satisfaction survey shows that more and more people are paying attention to tailwindcss

Compare the advantages and disadvantages of using tailwindcss with traditional CSS:

Tailwindcss is not a silver bullet, but it provides a new paradigm for writing your CSS

Technology stack:

• taro3
• vue3
• tailwindcss

Example code: github.com/yeyan1996/t…

<template>
  <view class="mb-20 white-children">
    <view class="w-1_4 bg-blue-400 h-40">25% width</view>
    <view class="w-1_2 bg-blue-400 h-40">50% width</view>
    <view class="w-3_4 bg-blue-400 h-40">75% width</view>
    <view class="w-full bg-blue-400 h-40">100% width</view>
  </view>

  <view class="bg-purple-300 mb-20">
    <text class="font-mono">
      font-mono: The quick brown fox jumps over the lazy dog.
    </text>
  </view>

  <view class="flex items-start bg-pink-300 mb-20">
    <view class="mr-20">align-start</view>
    <view class="h-120 w-80 bg-purple-600 rounded text-white">1</view>
    <view class="h-240 w-80 ml-10 bg-purple-600 rounded text-white">2</view>
    <view class="h-160 w-80 ml-10 bg-purple-600 rounded text-white">3</view>
  </view>

  <view class="border-solid border-4 border-blue-500 rounded mb-20 flex justify-center">
      border
  </view>

  <view class="rounded bg-yellow-500 w-100 mb-20 ml-1_3 flex justify-center text-white">rounded</view>

  <view class="bg-gradient-to-r from-yellow-400 via-red-500 to-pink-500 h-30 flex justify-center items-center">
    <text class="text-white">bg-gradient-to-r</text>
  </view>

  <button class="text-sm w-200 py-3 rounded-md font-semi bold text-white bg-blue-500 shadow-2xl mt-20">shadow</button>
</template>
Copy the code

The installation

yarn add -D tailwindcss tailwind-mini postcss
Copy the code

tailwindcss

Base package for tailwindcss, which contains common atomic classes, as well as plugins that provide customization for tailwindcss

tailwind-mini

Tailwind CSS in applets adaptation of the plugin package, fork since taro-tailwind

Delete the CSS that is not supported by wechat applet, such as responsive/media query/pseudo-class pseudo-element

Fixed some bugs and restored some tailwindCSS that might need to be used (gradient /inset etc.)

postcss

Additional postcss 8.0.0 + installation due to taro’s (3.0.12) postcss version 7.0.0 and tailwindcss built-in plugin incompatibility

The basic configuration

1. In taro, the postcss configuration is moved to config/index.js

// config/index.js
const config = {
  mini: {
    postcss: {
     tailwindcss: { enable: true },
     'tailwind-mini': { enable: true }
      // ...}},}module.exports = function (merge) {
  if (process.env.NODE_ENV === 'development') {
    return merge({}, config, require('./dev'))}return merge({}, config, require('./prod'))}Copy the code

2. New tailwind. CSS

touch src/tailwind.css
Copy the code

/** src/tailwind.css */
@tailwind utilities;
Copy the code

The custom syntax @tailwind can be parsed thanks to the postCSS and TailwindCSS plug-ins, while Utilities represents the common atomic classes in tailwindCSS

3. Introduce tailwindcss in the project entry file

// src/app.ts
import { createApp } from 'vue'
import './tailwind.css'

const App = createApp({})

App.use(store)
export default App
Copy the code

4. The root directory is tailwind.config.js

touch tailwind.config.js
Copy the code

module.exports = {
  purge: ['./src/**/*.vue'].corePlugins: {
    Wx applet does not support child selectors (>)
    space:false.divideStyle: false.divideWidth:false.divideColor: false.divideOpacity:false.Wx applet does not support the wildcard character (*) involved
    ringWidth:false.ringColor:false.ringOpacity:false.ringOffsetWidth:false.ringOffsetColor:false.Wx applet does not support web browser functions
    appearance: false.cursor: false.outline: false.placeholderColor: false.pointerEvents: false.stroke: false.tableLayout: false.userSelect: false,},theme: {
    extend: {zIndex: {
        '1': '1',}},spacing: {
      0: '0'.1: '2rpx'.2: '4rpx'.3: '6rpx'.4: '8rpx'.5: '10rpx'.6: '12rpx'.7: '14rpx'.8: '16rpx'.9: '18rpx'.10: '20rpx'.11: '22rpx'.12: '24rpx'.14: '28rpx'.16: '32rpx'.17: '34rpx'.18: '36rpx'.20: '40rpx'.24: '48rpx'.28: '56rpx'.30: '60px'.32: '64rpx'.36: '72rpx'.40: '80rpx'.48: '96rpx'.52: '104rpx'.56: '112rpx'.60: '120rpx'.64: '128rpx'.72: '144rpx'.76: '152rpx'.80: '160rpx'.84: '168rpx'.88: '196rpx'.92: '184rpx'.96: '192rpx'.100: '200rpx'.120: '240rpx'.130: '360rpx'.140: '280rpx'.160: '320rpx'.180: '360rpx'.200: '400rpx'.'1 _2': '50%'.'1 _3': '33.333333%'.'2 _3': '66.666667%'.'1 _4': '25%'.'3 _4': '75%'.'1 _5': '20%'.'2 _5': '40%'.'3 _5': '60%'.'4 _5': '80%'.'1 _6': '16.666667%'.'5 _6': '83.333333%'.'1 _12': '8.333333%'.'5 _12': '41.666667%'.'seven _12': '58.333333%'.'11 _12': '91.666667%'.full: '100%'.auto: 'auto',},fontSize: (theme) = > theme('spacing'),
    borderWidth: (theme) = > theme('spacing'),
    lineHeight: (theme) = > theme('spacing'),
    translate: (theme) = > theme('spacing'),
    inset: theme= > theme('spacing'),
    width: (theme) = > ({
      ...theme('spacing'),
      screen: '100vw',}).maxWidth: (theme) = > theme('width'),
    minWidth: (theme) = > theme('width'),
    height: (theme) = > ({
      ...theme('width'),
      screen: '100vh',}).maxHeight: (theme) = > theme('height'),
    minHeight: (theme) = > theme('height'),}}Copy the code

The configuration item does the following:

• Padding-right: 0px; padding-right: 0px; padding-right: 0px; padding-right: 0px; padding-right: 0px;
• Backslash (w-1_2 => width: 50%)
• Because tailwind introduces a large number of common atomic classes (i.e. utilities), the Purge configuration in the second line allows you to filter out unused CSS in production projects, similar to tree-shaking in the CSS version
  • Development environment:
  • Production environment:

Additional configuration

Overrides the length reference value

If your design is not 375 x 674 (iphone6), you will need to rewrite the length reference value

// tailwind.config.js
module.exports = {
  theme: {   
    spacing: {
          0: '0'.1: '2rpx'.2: '4rpx'.3: '6rpx'
      },
   // Attribute values can also be functions and inherit arguments passed in
   // That is, fontSize inherits spacing under theme
   fontSize: (theme) = > theme('spacing'),
   / / is equivalent to
   // fontSize: {
   / / 0: '0',
   // 1: '2rpx',
   // 2: '4rpx',
   // 3: '6rpx'
   / /},}}Copy the code

The default configuration has been lengthed so that text-1 equals 2rpx, or 1px on a 375 x 674 design, and the final unit is CSS name

.text-0 {
  font-size: 0
}

.text-1 {
  font-size: 2rpx
}

.text-2 {
  font-size: 4rpx
}

.text-3 {
  font-size: 6rpx
}
Copy the code

Adding a new class

Tailwindcss supports adding new classes if the default class does not meet the requirements

As mentioned earlier, tailwindcss can change/create the color of the base variable to achieve theme customization. The default theme is as follows

Use the extend property under theme to implement the class extension

Note that if you modify the theme attribute directly, the existing class will be overwritten

// tailwind.config.js
module.exports = {
   theme: {
     colors: {// This will override the original class
     },
    extend: {colors: {
          red: {
            deep: '#fbbfbc'.middle: '#fde2e2'.shallow: '#fef1f1',},},},}}Copy the code

The above example adds red-deep/red-middle/red-shallow theme colors while retaining the original red theme color

.bg-red-deep {
  --tw-bg-opacity: 1;
  background-color: rgba(251.191.188.var(--tw-bg-opacity))
}

.bg-red-middle {
  --tw-bg-opacity: 1;
  background-color: rgba(253.226.226.var(--tw-bg-opacity))
}

.bg-red-shallow {
  --tw-bg-opacity: 1;
  background-color: rgba(254.241.241.var(--tw-bg-opacity))
}

.bg-red-50 {
  --tw-bg-opacity: 1;
  background-color: rgba(254.242.242.var(--tw-bg-opacity))
}

.bg-red-100 {
  --tw-bg-opacity: 1;
  background-color: rgba(254.226.226.var(--tw-bg-opacity))
}

/ *... * /
Copy the code

Tips

css/scss/less/css module

Using Tailwind means you hardly need to use any CSS preprocessors

In rare cases, however, you may still need to write styles separately. Tailwind provides the @apply custom directive, which uses postCSS to apply tailwind’s syntax to the stylesheet alone

<! -- Extracting classes using @apply -->
<button class="btn btn-green">
  Button
</button>
Copy the code

.btn {
  @apply py-2 px-4 font-semibold rounded-lg shadow-md;
}
.btn-green {
  @apply text-white bg-green-500 hover:bg-green-700;
}
Copy the code

The dynamic of the class

Do not use dynamically concatenated classes; this will cause tree-shaking to fail

Ide integration

The Ide plug-in automatically parses tailwind. Config.js in the root directory to dynamically generate smart tips

Vscode:tailwindcss.com/docs/intell…

Webstorm (2020.3 bringing tailwind) : blog.jetbrains.com/webstorm/20…

The resources

On the growing popularity of atomic CSS