Tailwind Apply. Tailwind is a two-city company, growing in both New York City and Oklahoma City. We pride ourselves on being able to effectively collaborate across this divide on a daily basis. We also greatly value the virtues of face-to-face interaction, and make a point to encourage travel between offices as an essential facet of team-building. Setting Up Tailwind and PostCSS; The Utility-First Workflow; Responsive Design; Hover, Focus, and Active Styles; Composing Utilities with @apply; Extracting Reusable Components; Customizing Your Design System; Optimizing for Production Here's an example of using the Tailwind @apply function to clean up your HTML:.btn {@apply font-bold py-2 px-4 rounded;}. btn-blue {@apply bg-blue-500 text-white;}. btn-blue: hover {@apply bg-blue-700;} An approach that I personally like is keeping the classes in the template and then finding ways to make that template reusable.
I am seeing really slow build time as well. Without Tailwind my builds are running around 500-600ms, with tailwind it's around 6000-8000ms! I don't think this is due to @apply directive, all I only adding the base config and no custom css. @tailwind base; @tailwind components; .card { @apply bg-grey-200 text-grey-800; } @tailwind utilities; That is to say, @tailwind utilities needs to come after the custom class names. The problem is that with nuxt it seems to be the opposite -- namely, the custom class names (and their css styles) come after the tailwind utilities.
@tailwind base; @tailwind components; .card { @apply bg-grey-200 text-grey-800; } @tailwind utilities; That is to say, @tailwind utilities needs to come after the custom class names. The problem is that with nuxt it seems to be the opposite -- namely, the custom class names (and their css styles) come after the tailwind utilities.
Tailwind is a utility-first CSS framework for rapidly building custom user interfaces. This guide will show you how to get started with Gatsby and Tailwind CSS. Overview. There are three ways you can use Tailwind with Gatsby: Standard: Use PostCSS to generate Tailwind classes, then you can apply those classes using className. In a way, this is the problem that Tailwind was designed to solve, and by using @apply, we are bringing the problems back, in a different way. Here’s a video where Adam Wathan — the creator of Tailwind — dives into the pros and cons of using @apply . My recommendation is to install postCSS language support and then rename tailwind.css to tailwind.pcss then change the references in your package.json scripts (or whatever build scripts you are using for tailwind) to tailwind.pcss from tailwind.css and everything should work fine. Basic customization. You define your project's breakpoints in the theme.screens section of your tailwind.config.js file. The keys are your screen names (used as the prefix for the responsive utility variants Tailwind generates, like md:text-center), and the values are the min-width where that breakpoint should start.. The default breakpoints are inspired by common device resolutions:
