background

Our previous project adopted the development mode of SASS + CSS Module. However, it has the following disadvantages in use:

  1. As versions iterate, the size of the style file continues to grow.
  2. As the version continues to iterate, the code in SCSS file accumulates and is difficult to delete.
  3. You have to give it a class name before you write the style.

Search for other CSS architecture solutions in the community and find that tailwindcss can solve the above pain points. Here we share the CSS solution of tailwindcss+cssInJs.

what is tailwindcss?

Let’s take a look at the introduction of the official website:

Tailwind CSS is a highly customizable, base-tier CSS framework that gives you all the building blocks you need to build custom designs without having to re-write any design styles built into the framework.

Unlike front-end UI libraries such as Bootstrap and Bulma, it provides components that have been written. Much like the atomized CSS of old, CSS properties are granulated to generate corresponding function classes.

It also supports pseudo-classes and reactive types compared to atomic CSS. And highly customizable.

why tailwindcss?

Let’s take a look at the comparison of writing in the traditional way versus tailwindcss when we’re developing a component like the one shown below.

The traditional way

taiilwindcss

You can see that traditionally, when your Web needs styling, you have to write CSS code. But with tailwindcss, you only need to assemble functional CSS, and there are several benefits:

  1. You don’t have to put a lot of effort into naming a class.

No need to add silly class names like chat-notification-logo-wrapper just to be able to style something and not have to worry about the perfect class for something that is really just a Flex container.

  1. Your CSS file size will stop growing

With traditional methods, your CSS file size gets bigger every time you add a feature, but with tailwindcss functionality classes, everything is reusable, so you rarely need to write new CSS.

  1. Changing styles feels safer

Changing styles with tailwindcss adds or removes functionality classes that only apply to the current element, so they can be modified without affecting anything else.

how to use tailwindcss

1. Install dependencies

# Using npm
npm install tailwindcss
Copy the code

2. Add tailwind to your CSS code

Here’s how these three work:

  1. base:

    The style used to reset the browser style is actually packaged with normalize.css and can be removed if the project does it itself.

  2. components:

    Some of the component classes defined by Tailwind currently have only one Container class, which acts like the Container class of Bootstrap and does not need to be referenced if not needed.

  3. utilities:

    This is the core of tailwind, and it is the tailwind CSS that generates the corresponding property class.

  1. Configure the postcss plug-in to process CSS files using tailwindcss

Add tailwindCSS plugin to postcss.config.js as shown below

  1. Install the code prompt plug-in

We might think tailwindCSS has so many property classes… Remember there – ~ -. Rest assured, after installing tailwindCSS VSCode plug-in, intelligent code tips, you do not have to worry about their memory.

Automatic input prompt

Hover tip

The characteristics of the tailwind

1. Responsive Design

If our page needs to behave differently on different screens, we can use responsive classes, for example:

<div class="bg-white lg:bg-red">
	hello world
</div>
Copy the code

The above code has a red background color above the large screen and a white background below the large screen

Tailwindcss default reactive class

We can customize our own screens according to the actual scenarios in the project

// tailwind.config.js module.exports = { theme: { screens: { 'tablet': '640px', // => @media (min-width: 640px) { ... } 'laptop': '1024px', // => @media (min-width: 1024px) { ... } 'desktop': '1280px', // => @media (min-width: 1280px) { ... }}}},Copy the code

2. Variants

With tailwindcss, you can use normal function classes as well as hover:, focus:, active: and other variants.

Here is a list of the variants currently supported by tailwindcss

1, hover

Add the hover: prefix to apply a function class in the hover state.

<button class="bg-red-500 hover:bg-red-700 ..." > Hover me </button>Copy the code

2, the active

Add the active: prefix to apply a function when an element is in the active state.

<button class="bg-green-500 active:bg-green-700 ..." > Click me </button>Copy the code

3, the group – hover

If you need to style a child element when hovering over a specified parent element, add the group class to the parent element and prefix the child element’s function class with group-hover:.

<div class="group border-indigo-500 hover:bg-white hover:shadow-lg hover:border-transparent ..." > <p class="text-indigo-600 group-hover:text-gray-900 ..." >New Project</p> </div>Copy the code

4, the group – the focus

The group-focus variant works like the group-hover variant

<button class="group bg-yellow-500 focus:bg-yellow-600 ..." > <svg class="text-white group-focus:text-yellow-300 ..." ></svg> Bookmark </button>Copy the code

5, focus – the within

Add the focus-within: prefix so that a function class is applied only when a child element gets focus.

<form> <div class="text-gray-400 focus-within:text-gray-600 ..." > <div class="..." > <svg fill="currentColor"></svg> </div> <input class="focus:ring-2 focus:ring-gray-300 ..." > </div> </form>Copy the code

6, disabled

Add the disabled: prefix so that functionality classes are applied when an element is disabled.

<button class="disabled:opacity-50 ..." disabled>
  Submit
</button>
Copy the code

7, visited

Add the visited: prefix so that the functionality class is applied only after a link is visited.

<a href="#" class="text-blue-600 visited:text-purple-600 ..." >Link</a>Copy the code

8 Checked.

Add checked: prefix so that feature classes are applied only when a radio or check box is selected.

<input type="checkbox" class="appearance-none checked:bg-blue-600 checked:border-transparent ..." >Copy the code

9, the First child

Add the first: prefix to apply a function class only if the element is the first child of the parent element. This is most useful when using some kind of loop to generate elements.

<div class="..." > <div v-for="item in items" class="transform first:rotate-45 ..." > {{ item }} </div> </div>Copy the code

10, the Last child

Add the last: prefix to apply a function class only if the element is the last child of the parent element. This is most useful when using some kind of loop to generate elements.

<div class="..." > <div v-for="item in items" class="transform last:rotate-45 ..." > {{ item }} </div> </div>Copy the code

11, the Odd – child

Add odd: The prefix causes the function class to be applied only if the element is an odd-parent child. This is most useful when using some kind of loop to generate elements.

<div class="..." > <div v-for="item in items" class="transform odd:rotate-45 ..." > {{ item }} </div> </div>Copy the code

12, Even – child

Adding the even: prefix makes it possible to apply a function class only if the element has an even parent child. This is most useful when using some kind of loop to generate elements.

<div class="..." > <div v-for="item in items" class="transform even:rotate-45 ..." > {{ item }} </div> </div>Copy the code

\

Note that tailwindcss takes into account the size of the CSS file at development time, most of the variants are not in effect, if you need to use some of the variants in your project, you need to add the following configuration

// tailwind.config.js module.exports = { // ... Color: ['even','odd'...] ,}}}Copy the code

Note that the order in which classes are generated depends on the order in which variants are generated in the array

3. DarkMode

To enable dark mode, you need to add configuration

// tailwind.config.js
module.exports = {
  darkMode: 'media', // media or class
  // ...
}
Copy the code

However, Dark is also a variant that requires a variant configuration

// tailwind.config.js
module.exports = {
  // ...
  variants: {
    extend: {
      textOpacity: ['dark']
    }
  }
}
Copy the code

The media policy uses the PREFERn-color-scheme media function at the bottom, but if you want to support manual switching of darker modes, you can also use the ‘class’ policy for more control.

Volume optimization

Adding the Purge Configuration

// tailwind.config.js module.exports = {purge: {enabled: true, // whether to enable content: ['./ SRC /**/*.html'], // Check the file}, //... }Copy the code

It is recommended that the value be enabled: false during development to avoid continuous building during development.

Just-in-time mode (JIT)

Open the configuration

// tailwind.config.js module.exports = { mode: 'jit', purge: [ // ... ] , theme: { // ... } / /... }Copy the code

After jit mode is enabled,tailwindcss scans the purge configured template files to dynamically generate CSS files on demand. On-demand generation in both development and production, avoiding all style code generation in the development environment, improves development-time performance and experience.

Jit new features

  1. All variants take effect by default

In previous versions, most of the variants had to be configured in tailwindcss.config.js to take effect, but with jit enabled, all variants take effect by default and no configuration is required.

  1. Variant classes can be composed

All variations can be combined to easily target very specific situations without having to write custom CSS

  1. Arbitrary numeric attribute Settings are supported

While jit mode supports arbitrary values, it is not recommended that they be used as they undermine project design and code maintainability.

<! -- Sizes and positioning --> <img class="absolute w-[762px] h-[918px] top-[-325px] right-[62px] md:top-[-400px] md:right-[80px]" src="/crazy-background-image.png"> <! -- Colors --> <button class="bg-[#1da1f1]">Share on Twitter</button> <! -- Complex grids --> <div class="grid-cols-[1fr,700px,2fr]"> <! -... --> </div>Copy the code
  1. Support! Important class

Before the class! , can be effective! important

<p class="font-bold ! font-medium"> This will be medium even though bold comes later in the CSS. </p>Copy the code
  1. Pseudo-element variants are supported

JIT mode adds support for style pseudo-elements such as ::before, ::after, ::first-letter, ::first-line, ::marker, and :: Selection.

  1. Set the color of each edge
<div class="border-2 border-t-blue-500 border-r-pink-500 border-b-green-500 border-l-yellow-500"> <! -... --> </div>Copy the code
  1. Set cursor color
<input class="caret-red-500">
Copy the code
  1. Sibling element selector

Similar to the use of group, group:hover, sibling selectors can be written in the following format

<label> <input type="checkbox" class="peer sr-only"> <span class="h-4 w-4 bg-gray-200 peer-checked:bg-blue-500"> <! -... --> </label>Copy the code

Jit mode will introduce a variants configuration

The variants were included in Utilities before they are now included in Variants and then screens have been dropped

  @tailwind base;
  @tailwind components;
  @tailwind utilities;
- @tailwind screens;
+ @tailwind variants; 
Copy the code

Used in combination with Styled -component

Tailwindcss cannot contain all the style code in our project.

1. Let’s say we’re using a third-party UI library like this and need to change its style.

These are not as convenient to set using tailwindCSS, and in this case we need to style the style using the Styled – Component.

The last

Tailwindcss supports highly customized attribute class formats. The official default may not be applicable to you, but you can customize it according to your team’s specifications and habits.