CSS concepts | Tailwind CSS
How to use css?
1. Using a css file
2. Scss file
3. Inline css
4. Component framework — Bootstrap, Antd, Base UI, Material UI, Chakra
5. Styled Component
6. TailWind CSS
Using SCSS pros
- Nesting
- variable
- Mixins
- Reusable
- CSS
Using framework pros
- Optimize css
- Save time
- Responsive UI
- Componies — Uber has its own ui framework — Base ui
Using Styled Component
- Fast CSS
- A different way to implementing CSS
Using tailwind css
- css on the go(in the same file)
- reusability
- less bundle size
- flexible ui (Customization)
- good documentation
- tailwind css has its own style of writing
- its overwrite css properties
- it has a set of prefined classes which have their own properties
- every style you write are associated with class
- it is installed differently for different type of stacks like parcel, next js
- study of tailwind css config — content, theme, plugin
— Content section where you configure the paths to all of your HTML templates, JS components and any other files that contain Tailwind class names.
- POSTCSS — compile the tailwind css to normal css and require a .postcssrc config file
- Write the 3 lines inside the root/index/app css file
— @tailwind base;
— @tailwind components;
— @tailwind utilities;
-a vs code tailwind css intellisense
— its give sugestions of classes and what css is used by the class
- square backet notation for dynamic classes
- the size of build will be small because tailwind make sure only to include those classes which are used.
- usemostly defined classes
- mobile first classes in tailwind success
Steps to install and configure tailwind file?
https://tailwindcss.com/docs/installation/framework-guides
Tailwind css pros
- easy to use
- no duplicate css
- faster time
- easy to debug
Tailwind css cons
- high learning curve
- have to add multiple classes make it unreadable
CSS FLEX
Properties
flex-wrap — wrap, no-wrap, wrap-reverse
flex-direction — row, column, row-reverse, column-reverse
flex-flow — shorthand property for setting both the flex-direction and flex-wrap properties.
justify-content — align the flex items — center, flex-start, flex-end, space-around, space-between
— center — aligns the flex items at the center of the container
— flex-item — aligns the flex items at the beginning of the container
— flex-end — aligns the flex items at the end of the container
— space-around — displays the flex items with space before, between, and after the lines
— space-between — displays the flex items with space between the lines
align-items — align the flex items — center, flex-start, flex-end, stretch, baseline,
— center — aligns item in the middle of the container
— flex-start — aligns item at the top of the container
— flex-end — aligns items at the bottom of the container
— stretch — stretches the flex item to fit the container
— baseline — aligns the flex items such as their baselines aligns