Using Sans in Tailwind

1. **Ensure Tailwind is set up correctly**: Make sure that Tailwind CSS is properly configured and installed in your Sage theme. You should already have it set up since you provided the configuration.

2. **Using the Font in Your Templates**: In your Blade or Vue files, you can apply the `font-sans` class to any HTML element where you want to use the `Public Sans` font. Here’s an example:

<h1 class="font-sans text-2xl">This is a heading using Public Sans</h1>
   <p class="font-sans">This is a paragraph using Public Sans.</p>

3. **Custom CSS (if necessary)**: If you want to apply the font family to all elements or specific classes globally, you can extend your Tailwind CSS file (usually `app.css` or `style.css`) to include it in the base styles:

@layer base {
       body {
           @apply font-sans;
       }
   }

4. **Run your build process**: After making changes to your Tailwind configuration or CSS files, ensure that you run your build process (e.g., `yarn run build`) to generate the updated styles.

5. **Check Output**: Open your theme in a browser and inspect elements to confirm that the `Public Sans` font is being applied as expected.

By following these steps, you should be able to utilize the `sans` font family defined in your Tailwind configuration across your Sage theme.

@layer components {
.card {
background-color: theme('colors.white');
border-radius: theme('borderRadius.lg');
padding: theme('spacing.6');
box-shadow: theme('boxShadow.xl');
}
/* … */
}
what is theme(

Here’s how it works:

1. **Accessing Configuration Values**: You can use `theme()` to reference various design tokens defined in your Tailwind config, such as colors, spacing, font sizes, border radii, and more. For example, `theme('colors.white')` retrieves the value for the color white from your configuration.

2. **Using in Custom Styles**: When you define custom styles within the `@layer` directive (like in your `@layer components` block), you can use `theme()` to ensure that your styles adhere to the values specified in your Tailwind config. This promotes consistency across your styles and makes it easier to update them later.

### Example Breakdown

In your provided code:

@layer components {
  .card {
    background-color: theme('colors.white'); // Sets the background color to the white color defined in your Tailwind config.
    border-radius: theme('borderRadius.lg'); // Uses the large border radius defined in your Tailwind config.
    padding: theme('spacing.6'); // Sets the padding to a specific spacing value.
    box-shadow: theme('boxShadow.xl'); // Applies the extra-large box shadow from your config.
  }
}

### Advantages of Using `theme()`

– **Consistency**: Ensures that your components use the same design tokens across your application.
– **Maintainability**: If you change a value in your `tailwind.config.js`, it automatically updates everywhere `theme()` is used.
– **Clarity**: Makes it clear that the values being used are from your design system, improving readability.

Using `theme()` helps you create a cohesive styling system, which is one of the core principles of using Tailwind CSS effectively.

### Step 1: Initialize Tailwind CSS

If you haven't already created a Tailwind configuration file, you can generate it using the command line. Open your terminal and run the following command:

npx tailwindcss init

This command will create a `tailwind.config.js` file in the root of your project.

### Step 2: Configure `tailwind.config.js`

Open the newly created `tailwind.config.js` file and configure it according to your project requirements. Here's an example configuration that includes extending colors, spacing, and adding a custom font family:

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ['./index.php', './app/**/*.php', './resources/**/*.{php,vue,js}'],
  theme: {
    extend: {
      colors: {
        // Define custom colors here
        primary: '#1D4ED8', // Example primary color
        secondary: '#9333EA', // Example secondary color
      },
      spacing: {
        // Define custom spacing values here
        '128': '32rem', // Example custom spacing
      },
      borderRadius: {
        // Define custom border radii here
        'lg': '1rem',
      },
      boxShadow: {
        // Define custom box shadows here
        xl: '0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)',
      },
      fontFamily: {
        sans: ['Public Sans', 'sans-serif'], // Custom font family
      },
    },
  },
  plugins: [],
}

### Step 3: Create Your CSS File

Ensure you have a CSS file that imports Tailwind's directives. Typically, this file is named something like `app.css` or `style.css` and is located in your `resources` directory. Here’s an example of what it should contain:

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

/* Custom styles can be added below */
@layer components {
  .card {
    background-color: theme('colors.white');
    border-radius: theme('borderRadius.lg');
    padding: theme('spacing.6');
    box-shadow: theme('boxShadow.xl');
  }
}

### Step 4: Build Your CSS

After setting up your `tailwind.config.js` and CSS file, you need to run the build process to generate the final CSS file. If you are using npm or Yarn, you can typically do this with:

# For npm
npm run build

# For Yarn
yarn run build

### Step 5: Include the CSS in Your Theme

Make sure to include the generated CSS file in your theme's HTML or PHP files, usually in the head section:

<link href="{{ asset('path/to/your/generated.css') }}" rel="stylesheet">

### Summary

By following these steps, you’ll have a properly configured Tailwind CSS setup in your Sage theme or Laravel project, allowing you to use Tailwind's utility classes and extend its functionality with your own styles.