Tailwind 4

[dwightjack]

No description provided.

[Copilot]

PR Overview

This pull request updates various Vue components to align with Tailwind CSS version 4 and improve design consistency and accessibility. Key changes include:

• Adjustments to Tailwind class names for layout and spacing in multiple components.
• Replacement of deprecated or inconsistent component usage (e.g., BaseControl to BaseButton).
• Removal of the PostCSS configuration for Tailwind, likely reflecting an updated build process.

Reviewed Changes

File	Description
src/components/TheNotificationBar.vue	Removed divide classes for a simpler top bar layout
src/components/TheLoader.vue	Updated loader styling with dark mode support and shorthand animations
src/components/TheCycleEdit.vue	Switched from BaseControl to BaseButton for actions and adjusted spacing
src/components/TheCycle.vue	Minor reordering of Tailwind classes in the intervals list
src/components/TheControls.vue	Improved accessibility by switching to fieldset/legend structure
src/components/TheContainer.vue	Updated container styling and spacing
src/components/LayoutStack.vue	Changed spacing implementation and updated prop types; added CSS gap style
src/components/LayoutInline.vue	Updated prop types and internal gap styling with CSS variable usage
src/components/IntervalSquare.vue	Refined class ordering and simplified markup for clarity
src/components/IntervalEditBox.vue	Adjusted layout and button styling for interval settings
src/components/BaseToast.vue	Modified toast buttons with variant and size props
src/components/BaseTimer.vue	Reordered Tailwind classes for timer styling
src/components/BaseIcon.vue	Centralized icon names using a constant list for reusability
src/components/BaseControl.vue	Refactored button styling and structure for accessibility
src/components/BaseButton.vue	Added variant and size options with updated class handling
src/App.vue	Removed redundant role and updated container element styling
postcss.config.js	Removed as part of the Tailwind configuration changes

Copilot reviewed 24 out of 24 changed files in this pull request and generated 1 comment.

Comments suppressed due to low confidence (1)

src/components/LayoutStack.vue:29

• The CSS variable '--spacing' used in the gap calculation is not defined, which may lead to inconsistent spacing. Consider defining '--spacing' in a global stylesheet or using a fixed rem/em value.

.gap {

[Copilot]

The CSS variable '--spacing' referenced in the column-gap calculation is undefined. Define this variable or replace it with a proper static value to ensure consistent layout spacing.

Suggested change

	<style scoped>
	<style scoped>
	:root {
	--spacing: 1rem; /* Default value for spacing */
	}