tailwindcss-skeleton-screen icon indicating copy to clipboard operation
tailwindcss-skeleton-screen copied to clipboard

Support Tailwindcss v4

Open christhofer opened this issue 10 months ago • 0 comments

Currently the plugin works out of the box with the new @plugin directive. 👍

@plugin '@gradin/tailwindcss-skeleton-screen';

But I can't find a way to customize the value of the plugin without the Tailwind config file. Since v4 now recommends to not use config file anymore, I need to make it support the new @utility and CSS variables via @theme.

// WIP v4 config
@theme {
  --loading-base-color: #c7c7c7;
  --loading-moving-color: linear-gradient(to right, transparent 0%, #E8E8E8 50%, transparent 100%);
  --loading-duration: 1s;
  --loading-timing: cubic-bezier(0.4, 0.0, 0.2, 1);

  --loading-blue-base-color: blue;
  --loading-blue-moving-color: linear-gradient(to right, transparent 0%, lightblue 50%, transparent 100%);
  --loading-blue-duration: .3s;
  --loading-blue-timing: ease;
}

It's almost 2 years since I touch this code, I need to remember all the workflow to update and publish it to npmjs.

christhofer avatar Feb 14 '25 08:02 christhofer