This is the 10th day of my participation in the August More Text Challenge. For details, see:August is more challenging

What is Tailwind CSS?

Tailwind CSS is a class-first CSS framework that integrates classes such as Flex, PT-4, Text-Center, and Rotate 90 that can be combined directly in a scripting markup language to build any design.

Quickly build modern web sites without leaving your HTML.

I have experienced the development experience is very perfect ~πŸ€Ήβ™‚οΈ

Installation steps

Based on Vanilla (no framework)

Vanilla is a pure HTML,CSS,JavaScript project.

1. Initialize package.json

npm init

2. Install TaildCSS and its dependenciespostcss,autoprefixer

npm install -D tailwindcss postcss-cli autoprefixer

3. Initialize postcss.config.js and tailwind.config.js files

npx tailwind init -p

This will generate the two files in our root directory

4. Create a CSS folder and load the core components of the tailwindcss

Create a CSS folder in the root directory, and then create a style.css file in the folder. Load the core three components in the style.css file:

@tailwind base;
@tailwind components;
@tailwind utilities;
Copy the code

At this point your file may have a wavy line reminder, which is ok.

5. Configuration postcss

What is PostCSS, you might ask? Check out this article: What the hell is PostCSS?

We add a script under the package.json file

“watch”: “postcss css/style.css -o dist/style.css –watch”

Executing NPM run watch will output style.css in the CSS folder to style.css in the dist folder

Then we can use tailwindcss, create index. HTML in dist directory and introduce style.css in dist directory. The final file directory looks like this:

6. Try it

HTML code:

<h1 class="text-center text-3xl text-red-600 bg-blue-400">Let's learn tailwindcss</h1>
Copy the code

Instead of writing a style, let’s look at the page output:How about that, isn’t it great that we don’t have to write our own CSS, a huge productivity boost! Of course, you want to write your own style and use the preprocessor is also possible, specific use details, you can refer to the official document!

Official tailwindcss document

7. For the production environment

We are now ready to use tailwindcss, but it is not production-friendly because we can see that there are nearly 190,000 lines of code in the style.css file.Code that we don’t use will also be packaged, and we need to do some configuration for the production environment:

Open the tailwind.congif.js file, and add the file causing tailwincss class to the Purge array

Add script nodes to the package.json array

“build”: “cross-env NODE_ENV=production postcss css/style.css -o dist/style.css”

To performnpm run buildWhen we open style.css, we find that the package contains only 600 lines of code

The last

⚽ This article introduces the configuration process of the popular framework, to get you started quickly ~ ⚾ if this article is helpful to you, please click the “like” ~ πŸ€GitHub blog github.com/Awu1227. πŸ‰ I have other columns, welcome to read ~ 🏐 Playing with the Beauty of CSS 🎱Vue from giving up to getting Started 🎳 Simple JavaScript