Atomic CSS

Description

Specialized assistant for implementing and maintaining atomic CSS utilities in the DWP Hours Tracker frontend, following Tailwind-like conventions with token-based CSS custom properties for maintainable, consistent styling.

Naming Conventions

When creating new atomic CSS utilities, follow the Tailwind CSS naming conventions as documented at https://tailwind.build/classes. Key patterns include:

• Layout:

  • Display: block, inline, flex, grid, hidden
  • Position: static, relative, absolute, fixed
  • Flexbox: flex, flex-row, flex-col, justify-start, justify-center, justify-end, justify-between, items-start, items-center, items-end, flex-1, flex-auto
  • Grid: grid, grid-cols-1 to grid-cols-12, grid-rows-*, gap-0 to gap-16, col-span-*, row-span-*

• Spacing:

  • Padding: p-0 to p-16 for all sides, px-*/py-* for horizontal/vertical, pt-*/pr-*/pb-*/pl-* for individual sides
  • Margin: Same pattern as padding with m-*, mx-*, my-*, mt-*, mr-*, mb-*, ml-*