Skip to main content
ST FN

Tailwind CSS

Overdog comes equipped with a preconfigured Tailwind CSS preset that not only adheres to the best practices but also introduces additional utilities to enhance your design workflow. While the preset includes some opinionated settings to get you started on the right foot, you have full freedom to modify or remove it as per your project requirements.

Location

The preset Tailwind CSS configuration file is conveniently located at the root of your Overdog project, making it easily accessible for any customizations.

Fluid Properties Plugin

Included with the preset is the tailwindcss-fluid-properties plugin, which empowers developers to craft fluid typographic scales and responsive margins.

Preset Features

The preset enhances the default Tailwind CSS with the following features:

Recommended Breakpoints

Our breakpoints are fine-tuned to cover a wide range of devices, ensuring your website's responsiveness is top-notch.

Font Sizes in EM

We utilize EM units for font sizes, providing a scalable and accessible typographic experience.

Aspect Ratios

The aspect ratio utilities are named numerically (e.g., 1/1, 1/2), making them more intuitive than the default Tailwind naming convention.

Extended Transition Durations

A wider array of transition durations is available, giving you more control over the animation speed of elements.

Fluid Spacing Scale

We've introduced a fluid spacing scale that responds to the viewport size, based on CSS variables defined in the root CSS file. This scale includes:

  • full: var(--spacing),
  • threequarter: calc(var(--spacing) * 0.75),
  • twothird: calc(var(--spacing) * 0.66),
  • half: calc(var(--spacing) * 0.5),
  • third: calc(var(--spacing) * 0.33),
  • quarter: calc(var(--spacing) * 0.25),
  • sixth: calc(var(--spacing) * 0.16),

This feature grants a more granular control over margins and paddings, ensuring consistency across different elements and breakpoints.

EM Unit for Spacing

For the Tailwind spacing scale, we've incorporated EM units to maintain relative spacing that aligns with the typographic scale, fostering a consistent look and feel throughout the design.

Customizing the Preset

You can customize the Tailwind configuration as needed. Simply adjust the preset file or remove it altogether to tailor the styling to your project's style.

Remember, the preset is just a starting point. It's designed to be adapted to the needs of your project and team. Explore and tweak it to create a Tailwind setup that aligns perfectly for your Craft CMS website.