wxa.js introduces tailwindcss

TailwindCSS is a CSS framework that I have used more recently. Compared with the traditional front-end framework that we are used to, it has fewer restrictions. You can write styles according to your needs. If you are configured to remove unused CSS, the size of TailwindCSS can even be much smaller than other frameworks.

Also because of the above factors, I will naturally choose to use it in a small program. And since I am using wxa.js, here is also a corresponding wxa.js tutorial.

installation

1. Install TailiwndCSS into your project

Since Taildwind recommends PostCSS by default, but it needs PostCSS 7 or 8, but the PostCSS plugin provided by WXA.js uses 6, so here I choose not to install it as a PostCSS plugin.

Execute the following commands in the root directory of the WXA project, a tailwindcss.config.js will be generated in the root directory of your project, which will be used as the configuration file for your subsequent project configuration.

npx tailwindcss-cli@latest init

Then, create a tailwind.css file in the root directory of your project, and add the following code to it. This file will serve as your subsequent style base file.

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

After the addition is complete, you can execute the following command to generate a default tailwindcss style file.

npx tailwindcss-cli@latest build ./src/tailwind.css -o ./src/tailwind.css

The generated effect is as follows. You can see that without any processing, the entire CSS file is 3.81 MB, but don't worry, we can clear the styles.

If you don't want to enter this command later, you can add it to package.json of your project.

2. Remove the prefix automatically added by the default browser

Since different browsers may have different styles in different styles, tailwindcss will help us generate some specific prefixes when it is generated. But the applet does not involve the compatibility of the browser, so we can turn off the autoprefixer of taildwindcss.

--no-autoprefixer the generation command just now to generate CSS files without prefix

npx tailwindcss-cli@latest build  --no-autoprefixer  ./src/tailwind.css -o ./src/tailwind.css

As you can see, after removing the prefix, our file is reduced to 3.46MB.

3. Remove unused styles

tailwindcss provides the function of analyzing the styles used according to the page structure, so that when the production version is built, the unused styles can be removed, so as to achieve the purpose of narrowing the styles.

By configuring the purge property in the project, tailwindcss can automatically analyze the wxa file to remove unused styles.

module.exports = {
    purge: ['./src/**/*.wxa'],
    darkMode: false, // or 'media' or 'class'
    theme: {
        extend: {},
        screens: [],
    },
    variants: {
        extend: {},
    }
}

After configuring the purge attribute, you can see that the style file has dropped sharply to 9.93KB (because I use few styles)

4. Introduce

Modify the command to generate the file so that the suffix of the generated file is wxsss, so that you can continue to use the 0609b518b81f0e syntax @import

npx tailwindcss-cli@latest build --no-autoprefixer  -o ./src/tailwind.wxss

After regenerating the style file, you only need to add the following import code to the style app.wxa file to introduce tailwindcss into the project.

Because tailwindcss only generates one style file, it only needs to be introduced in app.wxa to ensure that all pages can use tailwindcss normally

@import "./tailwind.wxss" 

optimization

In fact, the size of taildwindcss can be further optimized. You can completely remove those attributes that you don't use, so that your css file is particularly small, thereby controlling the size of the applet style.