1. Introduction:

You’re probably tired of coding responsive every time

Really a bad experience with that creation (ie). This is one of the reasons why you guys use the tailwind and like the predecessors, like bootraps, foundations, etc., the tailwind also has properties assigned to its own classes. So why are we going to use tailwind instead of bootraps. As I initially introduced, the tailwind supports responsive extremely effective and easy. Accompanying that are some points I hate about bootrap is its javascript, along with that is how to import it into my project with different versions also makes me very uncomfortable (this is personal sharing, For your reference). generally bootrap it is very convenient but it is handling a lot of arrays not only css and i feel a little annoyed with custorming it, instead i find that convenient point in the tailwind.

2. tailwind

Tailwind is a utility-first CSS framework for rapidly building custom user interfaces.

Tailwind unlike other frameworks, it is not a UI kit with built-in components, in fact it has no components, nor a default theme. This means that if you need a navbar like a foundation or bootstrap, it won’t. But as it’s one of the things I find to be very good in the tailwind you can build a theme of your own style and definitely not (yaomi)

3. Install the tailwind

Use the command to install tailwind

Import css of Tailwind:

Add to your css:

If you want to create custom config files for your project, then you can create the tailwind’s config file using the command.

It will create config file tailwind.config.js in your project

It will have the following structure:

For example, I can custorm into:

There’s something else and this one you can learn more about in its document: https://tailwindcss.com/docs/installation

4. Example:

You may notice fields like: px (padding left-right), py (bottom-aligned padding) … these are the basic class properties built-in, but you can see that. there are more fields like md, lg, sm … it will be equivalent to the size of the screens that we have configured above, and it also has defaul available for you to the basic fields already: v.

Combine them a little bit, I have md: hidden lg: block, which means the bottom text will be hidden when you are below the md screen size , and displayed when at lg screen size . And there are many more interesting things, but an article is hard to say all, so please find out more yourself, if there is something interesting you can add in the comment section for everyone to join. check (yaomi)

5. SCSS

No matter how divine the frameworks are, or how good the support is, we still have to custorm, overwrite, or even write some paragraphs by ourselves, I will introduce to you one of the frameworks that support css writing. pure good that’s scss.

So what is scss:

SCSS: is a CSS Prepocessor – for faster CSS code writing and clearer structure, predefined variable management. To install, you can run the command:

Setting

command install

To compile SCSS code to CSS, access the directory containing the SCSS file and then run the command:

The basic syntax of scss

Using the above example, you can write css to solve as follows

1. Nested Rules in Scss

Referencing Parent in Scss

Helps refer to the parent element: the syntax is & with class or # if id

For example, I will have 1 more div with the class: product-developmenttitle__title

Or like &: hover …

Variables in Scss

You can rename variables with the syntax: $ variales: value;

For example, I usually put the colors in the project into a file, and import them where they are used. This way is great when you can change theame for the whole project very well

Extends extend in Scss

And you can import files together to easily extend your @import ‘Link

Conclude

The article is already quite long then I would like to conclude here if you have any questions do not hesitate to commend at the bottom. And to give yourself more motivation don’t forget to leave an upvote (thankyou)