This is the first day of my participation in the Gwen Challenge in November. Check out the details: the last Gwen Challenge in 2021

First post two official website addresses:

tailwindcss

windicss

background

At first, I chose tailwindcss for convenient writing style in the project, but in the later development, I found tailwindcss brought a lot of troubles to me, which hindered my development process. So I started looking for a replacement, and that’s when I started windicss.

Why choosewindicss

Here is the introduction of the official website:

A quote from idol Antfu should illustrate his motivation for creating Windi CSS:

When my project got bigger, with dozens of components, the initial compilation time was up to 3s and the hot update with Tailwind CSS took more than 1s. – @voorjaar

By scanning your HTML and CSS and generating utilities on demand, Windi CSS is able to provide faster load times and faster HMR in development without the need for cleanups in production.

Tailwindcss has artifacts that we don’t normally use, and sometimes what we really need to configure is somewhat contradictory. Combined with vite’s on-demand design ideals, I felt I should embrace WindCSS for a while.

Why temporary? Because idol recently wrote a blog post that was Amazing! “It smells good to read. Just see Amoy department front also reproduced, it can be said that its significance is extraordinary.

Blog post: # Reimagine atomized CSS

Making: unocss

I will also gradually transition to UNOCSS

tailwindcss

install

npm install -D tailwindcss@latest postcss@latest autoprefixer@latest
Copy the code

First we need to install PostCSS when we install Tailwind

npx tailwindcss init -p
Copy the code

At the same time, we need to use the command to create the configuration file

// tailwind.config.js
module.exports = {
  purge: [],
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [],
}
Copy the code
// postcss.config.js
module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
}
Copy the code

Configuration files are used to customize our CSS

const colors = require('tailwindcss/colors')

module.exports = {
  purge: ['./index.html', './src/**/*.{vue,js,ts,jsx,tsx}'],
  darkMode: false, // or 'media' or 'class'
  theme: {
    colors: {
      transparent: 'transparent',
      black: colors.black,
      white: colors.white,
      gray: colors.trueGray,
      indigo: colors.indigo,
      red: colors.rose,
      yellow: colors.amber,
      primary: '#adbac7',
      muted: '#3734e7',
      default: '#22272e'
    },
    extend: {
      borderColor: {
        ...
      }
    }
  },
  variants: {
    extend: {}
  },
  plugins: []
}
Copy the code

With how many match how many, the individual feels very trival.

// main.css
@tailwind base;
@tailwind components;
@tailwind utilities;
Copy the code

usage

You can start by reading the documentation briefly. Documentation is also simple

windicss

install

Windi CSS provides the best fit for mainstream tools. You can choose your favorite tool and start using Windi CSS. Vite is recommended

Install related packages:

npm i -D vite-plugin-windicss windicss
Copy the code

Then, add plugins to your Vite configuration:

vite.config.js

import WindiCSS from 'vite-plugin-windicss'

export default {
  plugins: [
    WindiCSS(),
  ],
}
Copy the code

Finally, import virtual:windi.css in your Vite entry file:

main.js

import 'virtual:windi.css'
Copy the code

The configuration file

// tailwinwind.config. ts // import {defineConfig} from 'windicss/helpers' import formsPlugin from 'windicss/plugin/forms' export default defineConfig({ darkMode: 'class', safelist: 'p-3 p-4 p-5', theme: { extend: { colors: { teal: { 100: '#096', }, }, }, }, plugins: [formsPlugin], })Copy the code

Introduce:

// main.ts import 'virtual:windi.css' // Vite plugin will parseCopy the code

The program

###Package#

Some dependencies are no longer necessary. If they are only Tailwind CSS dependencies. You can remove them safely.

package.json

- "tailwindcss": "*",
- "postcss": "*",
- "autoprefixer": "*",
+ "windicss": "*"
Copy the code

Basic style#

You can now remove the Tailwind CSS entry from your CSS.

- @import 'tailwindcss/base';
- @import 'tailwindcss/components';
- @import 'tailwindcss/utilities';
Copy the code

(Optional) Depending on the integration tool you are using, you may need to explicitly introduce Virtual: Windi.css in the entry. See the documentation for the tool for more details.

main.js

import 'virtual:windi.css'
Copy the code

The configuration file#

Variants and Purge will no longer need to be configured.

Colors and plugins need to be imported from Windicss instead.

We are also compatible with windi.config.js or tailwind.config.js

windi.config.js

-const colors = require('tailwindcss/colors')
+const colors = require('windicss/colors')
-const typography = require('@tailwindcss/typography')
+const typography = require('windicss/plugin/typography')

export default {
- purge: {
-   content: [
-     './**/*.html',
-   ],
-   options: {
-     safelist: ['prose', 'prose-sm', 'm-auto'],
-   },
- },
- variants: {
-   extend: {
-     cursor: ['disabled'],
-   }
- },
+ extract: {
+   include: ['./**/*.html'],
+ },
+ safelist: ['prose', 'prose-sm', 'm-auto'],
  darkMode: 'class',
  plugins: [typography],
  theme: {
    extend: {
      colors: {
        teal: colors.teal,
      },
    }
  },
}
Copy the code

Cleanup (optional)#

If you don’t use the other features of the configuration file below, you can delete it.

- postcss.config.js
Copy the code