How to add custom styles and ways to add custom styles in Tailwind-CSS ?

Tailwind is a popular CSS framework that makes your User Interface design making the process easier. It provides low-level classes and those classes combine to create styles for various components. Tailwind-CSS comes with a bunch of predefined styling but as a developer, we need more custom styling and the styles offered by tailwind are not enough to fulfill all requirements

To overcome from limited style issue tailwind allows us to add as many styling as we want to use in two ways:

1. Inline Styling
2. Config Styling

Color is the most common thing we need while building a webpage, so we will be taking color to see ways to add custom styling.

Inline Styling: Tailwind allows to use of inline styling by using square brackets (i.e. [ color code ]). With these square brackets, you can use any CSS property. With inline CSS there are some limitations. It cannot be reused again and again, you have to type the color code every time you want to use it.

Example: Below is the implementation of the inline styling:

Output:

 

Config Styling: Config styling allows developers to use any custom color any number of times they want to use it.

If you are using Tailwind through Play CD then custom colors can be added by adding a line after the comment in the code. For adding other colors just write get the color code and assign it a name that you remember.

Example: Below is the implementation of the Config styling:

Output:

 

Replacing the theme section: If you are using the production build of tailwind then while installing the tailwind production version, a file named tailwind.config.js was created. Inside that file replace the theme section with the code below or just copy the color section and paste it inside extend section:

//Javascript: Replace the theme in tailwind.config.js 
// with the code below:
theme: {
extend: {
   // ... just add the colors section 
   // including opening and closing bracket.
 colors: {
  GFGtext: '#379237',
           paraBG: '#59C1BD'
       },
   },
},

Example: Below is the implementation of the above approach with replacing the theme section:

Output: