The erratic nature of Tailwind actions

Question

The erratic nature of Tailwind actions

Currently, I am immersed in a Livewire project and attempting to implement some Tailwind theme configurations. However, the process does not appear to be coherent whatsoever. Here is an excerpt of my Tailwind configuration:

theme: {
    extend: {
        fontFamily: {
            sans: ['Figtree', ...defaultTheme.fontFamily.sans],
        },
        colors: {
            'blue':  {
                light: '#bae6fd',
                DEFAULT: '#38bdf8',
                dark: '#0369a1'
            },
            'red': '#be123c'
        }
    },
}

Subsequently, comes the button component

@props(['color' => 'gray'])

@php
    $classes = 'bg-' . $color . ' hover:bg-' . $color . '-dark inline-flex items-center 
               px-3 py-2 border-transparent rounded-md font-semibold text-xs text-white 
              uppercase tracking-widest focus:outline-none focus:ring-2 focus:ring- 
              indigo-500 focus:ring-offset-2 transition ease-in-out duration-150'
@endphp

<button {{ $attributes->merge([
            'type'  => 'submit',
            'class' => $classes
        ]) }}>
    {{ $slot }}
</button>

The button is utilized like this

<x-button color="blue">{{ __('Edit') }}</x-button>

And here's what unfolds:

execute npm run build: white background, style classes fail to apply.
re-run npm run build: style properties recognized and function as desired.
run it again: ceases to function, background turns white with no hover effect.
modify button's color attribute to red and execute npm run build: somewhat functional but lacks hover effect.
switch back to blue and execute command: failure, complete disregard for blue theme colors.
switch to red and run command: successful .....
eventually even red stops working, making it challenging to anticipate its behavior.

The situation seems unreliable, potentially stemming from an erroneous approach on my part, anticipating it to mirror a frontend JavaScript framework's performance.

Any guidance and insights are greatly welcomed.

css laravel tailwind-css laravel-blade laravel-livewire

Answer 1

Answer №1

Color Definitions Not Found

Your chosen colors are not defined in your Tailwind configuration. Among the colors you listed, only bg-red, bg-blue, and bg-blue-dark are valid options. However, bg-gray, bg-gray-dark, and bg-red-dark do not exist.

To include these missing colors, you can update your configuration as follows:

theme: {
  extend: {
    fontFamily: {
      sans: ['Figtree', ...defaultTheme.fontFamily.sans],
    },
    colors: {
      'blue':  {
        light: '#bae6fd',
        DEFAULT: '#38bdf8',
        dark: '#0369a1'
      },
      red: {
        DEFAULT: '#be123c',
        dark: '…',
      },
      gray: {
        DEFAULT: '…',
        dark: '…',
      },
    }
  },
}

Generating Dynamic Class Names

As specified in the documentation:

It is crucial to note that Tailwind will only identify complete, unaltered class names within your source files.

If you dynamically construct or concatenate partial class names, Tailwind will overlook them and omit the corresponding CSS rules:

Avoid constructing dynamic class names
<div class="text-{{ error ? 'red' : 'green' }}-600"></div>
In the example above, since neither text-red-600 nor text-green-600 classes exist, Tailwind won't generate them. Hence, ensure all class names used are complete:

Always utilize complete class names
<div class="{{ error ? 'text-red-600' : 'text-green-600' }}"></div>

To handle this, you could:

Include the entire class in the variable passed to color like so:

@props(['color' => 'bg-gray hover:bg-gray-dark'])

@php
  $classes = $color . ' inline-flex items-center …'
@endphp

<x-button color="bg-blue hover:bg-blue-dark">{{ __('Edit') }}</x-button>

Create a dictionary for color mapping to Tailwind class names:

@props(['color' => 'gray'])

@php
  $dictionary = [
    'gray' => 'bg-gray hover:bg-gray-dark',
    'blue' => 'bg-blue hover:bg-blue-dark',
    …
  ];
  $classes = $dictionary[$color] . ' inline-flex items-center …'
@endphp

Safelist the classes if there are a limited number of known colors:

module.exports = {
  safelist: [
    { pattern: /^bg-(gray|blue|…)$/ },
    {
      pattern: /^bg-(gray|blue|…)-dark$/,
      variants: ['hover'],
    },
    // …
  ],
  // …
];

Answer 2

Color Definitions Not Found

Your chosen colors are not defined in your Tailwind configuration. Among the colors you listed, only bg-red, bg-blue, and bg-blue-dark are valid options. However, bg-gray, bg-gray-dark, and bg-red-dark do not exist.

To include these missing colors, you can update your configuration as follows:

theme: {
  extend: {
    fontFamily: {
      sans: ['Figtree', ...defaultTheme.fontFamily.sans],
    },
    colors: {
      'blue':  {
        light: '#bae6fd',
        DEFAULT: '#38bdf8',
        dark: '#0369a1'
      },
      red: {
        DEFAULT: '#be123c',
        dark: '…',
      },
      gray: {
        DEFAULT: '…',
        dark: '…',
      },
    }
  },
}

Generating Dynamic Class Names

As specified in the documentation:

It is crucial to note that Tailwind will only identify complete, unaltered class names within your source files.

If you dynamically construct or concatenate partial class names, Tailwind will overlook them and omit the corresponding CSS rules:

Avoid constructing dynamic class names
<div class="text-{{ error ? 'red' : 'green' }}-600"></div>
In the example above, since neither text-red-600 nor text-green-600 classes exist, Tailwind won't generate them. Hence, ensure all class names used are complete:

Always utilize complete class names
<div class="{{ error ? 'text-red-600' : 'text-green-600' }}"></div>

To handle this, you could:

Include the entire class in the variable passed to color like so:

@props(['color' => 'bg-gray hover:bg-gray-dark'])

@php
  $classes = $color . ' inline-flex items-center …'
@endphp

<x-button color="bg-blue hover:bg-blue-dark">{{ __('Edit') }}</x-button>

Create a dictionary for color mapping to Tailwind class names:

@props(['color' => 'gray'])

@php
  $dictionary = [
    'gray' => 'bg-gray hover:bg-gray-dark',
    'blue' => 'bg-blue hover:bg-blue-dark',
    …
  ];
  $classes = $dictionary[$color] . ' inline-flex items-center …'
@endphp

Safelist the classes if there are a limited number of known colors:

module.exports = {
  safelist: [
    { pattern: /^bg-(gray|blue|…)$/ },
    {
      pattern: /^bg-(gray|blue|…)-dark$/,
      variants: ['hover'],
    },
    // …
  ],
  // …
];

The erratic nature of Tailwind actions

Answer №1

Color Definitions Not Found

Generating Dynamic Class Names

Similar questions

How to adjust the size of the text on a button in jQuery mobile using custom

Limiting the number of characters in PHP/MySQL

Columns that adapt to different screen sizes while maintaining a fixed aspect ratio, limited to a maximum of two columns

Jquery double-click Event Not Functioning Properly

I'm curious if there's a method to ensure that the content within a mat-card stays responsive

Activate the button with a tap of the space bar on a webpage

Is it possible for a "position:absolute" div to maintain its relative width?

Ways to conceal a grid item in Material UI framework

What is the best way to implement dragging functionality for an image within a specific area?

The function will not be triggered when the form is submitted

Designing tables for email marketing

Dragging and dropping elements onto the screen is causing them to overlap when trying

The o-gradient feature is not compatible with Mac and Linux operating systems

Transforming an image into a CSS-powered website menu button: Step-by-step guide

Angular-ui-bootstrap-tabs feature smooth transitions when switching between tabs, but lacks animation when moving

Adjusting the margin on an element causes a shift in the entire page's

Creating a clickable image map for the footer

How can one determine the most accurate box-shadow values?

Using Axios with Vue and Laravel 7 to set content in SymfonyComponentHttpFoundationResponse

The CSS menu appears more compact when viewed on a different page