CSS stands for Cascading Style Sheets which is particularly used in styling the web pages created using HTML or XML.With the help of CSS one can create actual dynamic pages which are far more attractive than simple HTML or XML pages. Dynamism is the key to attract the crowd towards the websites. CSS can be implemented using different types of frameworks for example bootstrap , UIKit, pure , tailwind css , etc.
Tailwind CSS is one of the most streamlined frameworks of CSS.Tailwind CSS is a utility-first framework of CSS. Utility-first framework here means that like bootstrap , tailwind css does not provide us with the pre-written classes for some components, instead tailwind css provides with the utility that are useful in creating the various components for a web page. Hence, it is more of a learning experience while working with tailwind css.
Tailwind CSS is an easy framework to install using npm. For installing Tailwind CSS just refer to the website tailwindcss.com . All the important documentations are available on the website which will make it easier to install the Tailwind CSS framework of CSS.
Tailwind CSS can also be used via CDN. CDN is Content Delivery Network , which is a distributive network that transfers web pages to the users based on the geographical location of the user, origin of web pages and distributing server. But using tailwind css via CDN has some drawbacks for example:
- One can not customize the tailwind default theme
- One can not use directives for example:@apply , @variants, etc.
- One can not use features like group hover.
- One can not add third party plugins.
As we know Tailwind CSS does not provide any built-in components like button , alerts, navigation,grids, etc. , but it is quit easy to design these components using tailwind css. For this one should know the basic usage of tailwind css.
Some basic terms in tailwind css are:
- container : it is used to set the components in a definite screen size.
- mx-auto : it is required to align the contents of the container in center.
- m-1 : this sets the margin to 0.25 rem; the number increases and the value of the margin also increases.
- -m-1 : this reduces the margin by 0.25 rem; the number increases and the value decreases.
- my-1 : this sets the margin for top and bottom as 0.25 rem each; as we increase the number the margin size increases.
- -my-1: this again reduces the size of margin at the top and bottom by 0.25 rem; the number increases increases the value decreases.
- mx-1: this sets the value for margins at the left side and the right side as 0.25 rem; the number increases and again the value increases.
- -mx-1: this again reduces the size of margin at the left side and right side by 0.25 rem; the number increases increases the value decreases.
Elements used to reign the Display Box Element :
- flex : this element is used to align some items in a single row.
- inline-flex: this element is used to fix the size of the container according to the size of components to be kept in a single row.
- block: this element is used to write text as a paragraph and use the entire width of the displayed screen.
- inline-block: used to align components in a single row acquiring the entire width of the screen.
- inline: it is used to align items in a line that does not exceed the code written for a text .
- table: this element is used to arrange components in a table format.
- table-row: it is used to position the items in a single row, it represents the <tr> tag in HTML.
- table-col: it is used to position the items in a single column, it represents the <td> tag in HTML.
Setting the colors and styles for Backgrounds:
- bg-gray-100: sets the background color to gray with the shade corresponding to the number 100 , which can be extended upto 900. For using different colors just replace gray with color which you want to use.
- bg-repeat: this element repeats the background vertically and horizontally.
- bg-no-repeat: this element specifies to not repeat the background.
- bg-repeat-x: this element repeats the background horizontally.
- bg-repeat-y: this element repeats the background vertically.
Applying colors and styling to Texts:
- Text Decoration : underline:- used to underline the texts ; no-underline:- strictly specifies not to underline the texts ; line-through:- draws a line over the text.
- Text Color : text-gray-100 :- colors the text as gray shade corresponding to the value 100 which can varry upto 900 and color gray can be replaced by any other color.
- Text Alignment : text-center :- this element is used to align the text at the center of the display screen ; text-left :- is used to align the center at the left side ; text-right :- used to align the center at the right side of the display screen ; text-justify :- used to align the text equally form all the sides.
- Text Transform : uppercase :- this element is used to convert the text in uppercase ; lowercase : used to convert the entire text in lowercase ; capitalize :- used to capitalize the first letter of each word ; transform-none :- used to strictly avoid any change in the texts.
- Text Sizes : text-xs:- for extra small text size ; text-sm :- for small text size ; text-lg :- for large text size ; text-xl :- for extra large text size which can be increased as 2xl , 3xl , 4xl , 5xl and 6xl.
Tailwind CSS’ most attractive feature is that it allows the developer to adjust the components according to the different devices sizes i.e. it helps the developer to make a responsive websites which can be easily adjusted to the displaying devices.
The basic keywords used to build up a responsive website are:
sm : (any attribute for eg: text color , text size,etc.) :- this element is used for giving designs for small devices and larger than it.
md:(any attribute) :- this element is used for medium size devices and larger than it.
lg:(any attribute) :- this element is used for large devices and larger than it.
xl:(any attribute) :- this element is used for extra large devices.
Hence Tailwind CSS is an easy framework to learn. Tailwind CSS pitches in to make different components on our own with our own designs instead of the limited available designs.One can apply his/her unique ideas to build a responsive and dynamic designs for websites.