#Astro with Tailwind question

48 messages · Page 1 of 1 (latest)

jaunty hamlet
#

question about tailwind and the applyBaseStyles config in Astro

#

let's say I have two pages: about and products

#

for most of my CSS I just use the TW provided classes

#

but some times I need a truly global piece of CSS....like setting a custom font face

#

other times, I have custom css specific to a page....like a custom grid setup. I don't need that CSS on every page....only the about page (for example)

#

I feel like I have too many options

#

is there anything wrong with adding <style> tags to my BaseLayout.astro and adding all my truly global CSS there......

#

or importing a global.css into the BaseLayout and linking to it

willow lion
#

Tailwind (not Astro) is quite opinionated on this: every page loads all the CSS

You can use the components later to define reusable CSS if you want, but Tailwind actually recommends doing the composition in your JSX, not in your CSS

jaunty hamlet
#

right

willow lion
#

Your truly global stuff should go in the base layer in whatever file calls @tailwind base

jaunty hamlet
#

right

#

it doesn't have to go into a layer

#

The @layer directive helps you control declaration order by automatically relocating your styles to the corresponding @tailwind directive, and also enables features like modifiers and tree-shaking for your own custom CSS.

willow lion
#

Correct It does not. It’s just a good practice for most things.

jaunty hamlet
#

fair

#

so, for a one off grid class that's easier to configure in raw CSS, where would I put that.....

willow lion
#

font-face is actually something I might not put in a later because you want it parsed as early as possible

jaunty hamlet
willow lion
#

for a one off grid class that's easier to configure in raw CSS

My first instinct is the components layer in src/style/site.css

If it's really tied to one specific component, I might put it in the components layer in src/components/my-component/style.css and CSS-import that from src/style/site.css

jaunty hamlet
#

so, for a one off grid class that's easier to configure in raw CSS, where would I put that.....in my <style> or in the about.css and import it....or in the global.css

willow lion
#

So

src/
  styles/
    site.css # @tailwind directives, base styles, import components/foo/style.css
  components/
    foo/
      index.astro # component code, uses className="foo"
      style.css # @layer components { .foo { … } }
jaunty hamlet
#

as I understand it, if I add it to a layer, but don't use it, it'll get purged......

willow lion
#

correct. But that's only if you don't use it anywere in your site. It's a static check, not a runtime per-page check

jaunty hamlet
#

so, regardless of what I do.....all my css will end up on the browser....even the CSS classes that aren't used on the page you're viewing

#

so the css can be cached cause it's the same for every page

willow lion
#

exactly!

jaunty hamlet
#

so is there some harm in using the <style> section in a component for custom / raw CSS

willow lion
#

You'll want to use good cache-control headers so the browser doesn't revalidate the CSS on page transitions. That works well with Astro because Vite automatically fingerprints the CSS file. You'll end up with

<link rel="stylesheet" href="/_astro/site.abc123.css" />
jaunty hamlet
#

style tag vs importing an external sheet

willow lion
#

I see two reasons not to do it, but neither is a blocker:

  1. you can't use Tailwind in there, which might be confusing to developers
  2. you'll end up with two stylesheets. This might be exactly what you want depending on your use-case, but it's a performance hit if you aren't careful
jaunty hamlet
#

why couldn't you use TW?

willow lion
#

Tailwind won't see this and won't process it:

---
// src/components/foo.astro
---
<style>
  .foo {
    @apply text-blue-400;
  }
</style>
<div class="foo">
  Foo
</div>

Tailwind only processes your single entrypoint CSS file (e.g. src/style/site.css) and anything it @imports

#

You can use Tailwind classes in the component along with custom CSS though:

---
// src/components/foo.astro
---
<style>
  .foo {
    /* some manual CSS */
  }
</style>
<div class="foo text-blue-400">
  Foo
</div>
jaunty hamlet
#

yeah....so in this^ example.....the .foo class would only end up on the browser when you rendered a page that used this foo component....right?

#

that way all pages get all the CSS

#

this new project is mostly a static site for a corporate landing page

#

very little JS or custom CSS

#

I mostly just wanted to understand the options and pros/cons of them

#

this will also keep in line with what someone who knows TW would expect.....a single .css file

willow lion
#

I think that's wise. The case for a separate CSS file is something like a site that's 20% user-facing and 80% internal-facing. You don't want public users to have to download all the internal-facing CSS that they'll never use

jaunty hamlet
#

thinking about it more.....and reading this:

#

By default, the integration imports a basic base.css file on every page of your project. This basic CSS file includes the three main @tailwind directives:

#

if you really wanted to optimize, you could make each page import it's own base.css

#

and it would only have the styles used on that page

willow lion
#

Alas, it would not. Tailwind has a central content: ['./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}'] configuration. That configuration is going to pick up all the matches for all pages and components. You'd end up with N .css files, each with their own per-page CSS plus all of the Tailwind utility classes used anywhere in your project

Tailwind intentionally makes it difficult to do multiple Tailwind configs within a project