Prepare Your Web Development Tools

prepare your needs, from hardware to software and other needs such as internet network

The first step is to prepare the tools and what you need, in this article we assume that you can use Tailwind with a CDN.

Prepare Your Web Development Tools

Because it uses a CDN, you must have internet access to call the Tailwind CDN, for text editors and browsers you can adjust to your preferences

Create the basic structure of the html code

Basic HTML

<html>
 <head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Customized Tailwind Colors and Fonts</title>
 </head>
 <body>
  <!-- your content -->
 </body>
</html>

The above is an example of using basic HTML, of course you can fill in the body section, but for tailwind, we will put it in the head section later.

Add the tailwind CSS CDN

Tailwind CDN is simple and easy to use

Tailwind CDN is very easy to use, Tailwind CDN is very suitable if you are in the development process, Here we provide an example of using the Tailwind CDN

<html>
 <head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Customized Tailwind Colors and Fonts</title>
  <script src="https://cdn.tailwindcss.com?plugins=forms,typography,aspect-ratio,line-clamp"></script>
 </head>  
 <body> 
  <!-- your content --> 
 </body> 
</html>

Explanation of the code above:

  • https://cdn.tailwindcss.com is the default tailwind CDN
  • ?plugins=forms,typography,aspect-ratio,line-clamp is the plugin used

Add The Font That You Will Use In The Head Section

for example, I use google fonts

<html>
 <head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Customized Tailwind Colors and Fonts</title>
  <script src="https://cdn.tailwindcss.com?plugins=forms,typography,aspect-ratio,line-clamp"></script>
  
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800&display=swap" rel="stylesheet"> 
 
 </head>
 <body> 
  <!-- your content --> 
 </body> 
</html>

I gave an example of using Google Fonts, why Google Fonts? because google fonts has a wide variety of options that are varied and also free, as well as quite complete documentation.

for the script above you only need to copy it from the google font page

Add javascript settings for tailwind CSS

Added javascript for the tailwind CSS settings - simple and powerful

Here I plan to use the “Outfit” font and the “custom” color, I will use the custom color later for the “cyan” color, here is an example of a simple code

<html>
 <head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Customized Tailwind Colors and Fonts</title>
  <script src="https://cdn.tailwindcss.com?plugins=forms,typography,aspect-ratio,line-clamp"></script>
  
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800&display=swap" rel="stylesheet"> 
  
  <script>    
   tailwind.config = {  
    darkMode: 'class', // or 'media'  
    theme: {   
     display: ["group-hover"],
     extend: {
      fontFamily: {
       sans: ['Outfit',],
     },
     colors:({ colors }) => ({
       custom : colors.cyan,
     }), 
    }, 
   }, 
  } 
  </script> 
 </head> 
 <body> 
  <!-- your content --> 
 </body> 
</html>

Brief explanation of the code above:

  • custom : colors.cyan

    , it means that I use a color with a custom name which will appear blue in the future, another example:

    rice_leaves : colors.green

    Or

    rice_leaves : #00cc00 
  • sans: ['Outfit',]

    , this is the font we will use

Conclusion

To use the color and font you want, you don’t need to make complicated settings, you just have to set it in the extend section, and the settings are easy.

Now we try to test the settings that we do

to test you only need a little short code or you can with the code that you have prepared.

here is an example of the short code, put this code in the body tag

<div class="bg-custom-500">
 <p class="text-white">learn tailwind css settings with 92pixels</p>
</div>