Tailwind Css Handling Global Styles With Tailwind Complete Guide

Complete Examples, Step by Step for Beginner: Tailwind CSS Handling Global Styles with Tailwind

Below are step-by-step examples to help you understand how to handle global styles with Tailwind CSS:

Step 1: Setting Up Your Project with Tailwind CSS

First, you need to set up a new project or an existing one with Tailwind CSS.

Using Vite with Create Vite:

1. Open your terminal.

2. Run the following command to create a new Vite project:

   npm create vite@latest my-tailwind-project --template vanilla
   

3. Navigate into the project directory:

   cd my-tailwind-project
   

4. Install Tailwind CSS along with its peer dependencies:

   npm install -D tailwindcss postcss autoprefixer
   

5. Initialize Tailwind CSS to generate the tailwind.config.js file:

   npx tailwindcss init -p
   

6. Configure tailwind.config.js to include all your template HTML files:

   module.exports = {
     content: [
       './index.html',
       './src/**/*.{js,ts,jsx,tsx}',
     ],
     theme: {
       extend: {},
     },
     plugins: [],
   }
   

7. Include Tailwind directives in your CSS file. Create a src/input.css file and add the following:

   @tailwind base;
   @tailwind components;
   @tailwind utilities;
   

8. Update the vite.config.js file to process CSS:

   import { defineConfig } from 'vite';
   
   export default defineConfig({
     css: {
       preprocessorOptions: {
         postcss: {
           plugins: [require('autoprefixer'), require('tailwindcss')]
         }
       }
     }
   });
   

9. Start the Vite development server:

   npm run dev
   

Step 2: Adding Global Styles with Tailwind CSS

Tailwind CSS does not use traditional CSS as its paradigm focuses on utility-first styling. However, you can still set up "global styles" by using @apply and defining base styles in the @tailwind base directive.

Global Styles with @apply:

1. Open your src/input.css file.
2. Define your global styles using @apply. For example, to set a global background color and font style:

   @tailwind base;
   @tailwind components;
   @tailwind utilities;
   
   body {
     @apply bg-gray-100 text-gray-700;
   }
   

Base Styles in @tailwind base:

Tailwind allows you to define base styles that are applied globally. This is done by defining rules within the @base layer in tailwind.config.js.

1. Open your tailwind.config.js file.
2. Define base styles using the base key in the extend property:

   module.exports = {
     content: [
       './index.html',
       './src/**/*.{js,ts,jsx,tsx}',
     ],
     theme: {
       extend: {
         base: {
           body: {
             backgroundColor: 'gray-100',
             color: 'gray-700',
           },
           'h1, h2, h3, h4, h5, h6': {
             fontWeight: 'bold',
             color: 'blue-600',
           },
           'p, a, button': {
             fontSize: 'lg',
           },
         },
       },
     },
     plugins: [],
   }
   

In this example, the body tag and other heading and paragraph tags receive global styles.

Step 3: Customizing Global Styles

You can customize global styles by modifying the theme section in your tailwind.config.js.

1. Open your tailwind.config.js file.
2. Define a custom theme:

   module.exports = {
     content: [
       './index.html',
       './src/**/*.{js,ts,jsx,tsx}',
     ],
     theme: {
       extend: {
         colors: {
           primary: '#FF5733',
           secondary: '#33FF57',
         },
         fontSize: {
           base: '1rem',
           lg: '1.25rem',
         },
         fontWeight: {
           bold: 700,
         },
       },
       base: {
         body: {
           backgroundColor: 'gray-100',
           color: 'gray-700',
         },
         'h1, h2, h3, h4, h5, h6': {
           fontWeight: 'bold',
           color: 'blue-600',
         },
         'p, a, button': {
           fontSize: 'base',
         },
       },
     },
     plugins: [],
   }
   

Step 4: Adding Custom Utility Classes

You can also extend Tailwind CSS by adding custom utility classes.

1. Open your tailwind.config.js file.
2. Add custom instructions in the extend property:

   module.exports = {
     content: [
       './index.html',
       './src/**/*.{js,ts,jsx,tsx}',
     ],
     theme: {
       extend: {
         colors: {
           primary: '#FF5733',
           secondary: '#33FF57',
         },
         fontSize: {
           base: '1rem',
           lg: '1.25rem',
         },
         fontWeight: {
           bold: 700,
         },
         screens: {
           '3xs': '350px',
           custom: '1200px',
         },
       },
     },
     plugins: [],
   }
   

With this configuration, you can now use .text-primary, .text-secondary, and other custom settings in your HTML.

Step 5: Using Utility Classes in HTML

Now that you have set up your global and custom styles, you can use utility classes in your HTML to apply styles.

1. Open your index.html file.
2. Use utility classes to apply styles:

   <!DOCTYPE html>
   <html lang="en">
   <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Tailwind Global Styles</title>
     <link rel="stylesheet" href="/src/input.css">
   </head>
   <body class="p-5">
     <header class="mb-8">
       <h1 class="text-3xl font-bold text-blue-600">Welcome to My Website</h1>
       <nav class="mt-4">
         <a href="#" class="text-lg text-secondary mr-4">Home</a>
         <a href="#" class="text-lg text-secondary mr-4">About</a>
         <a href="#" class="text-lg text-secondary">Contact</a>
       </nav>
     </header>
   
     <main>
       <p class="text-lg">This is a paragraph styled with Tailwind CSS.</p>
       <button class="bg-primary text-white p-3 rounded mt-4">Click Me</button>
     </main>
   </body>
   </html>
   

Summary

In this guide, we covered how to set up a project with Tailwind CSS, add global styles, extend the theme, and use utility classes in HTML. By following these steps, you can effectively manage global styles while leveraging the power and flexibility of Tailwind CSS.