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 build
When 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