Using SCSS with Astro

Adding SCSS to Astro

npm install sass

External SCSS File

import "../assets/css/styles.scss";

That’s it.

Using SCSS in Astro Components

Remember to add lang="scss" to <style></style>.

<style lang="scss">
    .body{
        &__element{
            &--mutation{}
        }
    }
</style>

Using Tailwindcss in Astro

npx astro add tailwind

Imported files instead of used. SCSS requires that @use be at the very top of the page, but Tailwindcss over wrote my styles. I think it’s just @tailwind base;.

@tailwind base;
@tailwind components;
@tailwind utilities;

@import "_fonts";
@import "_vars";
@import "_reset";
@import "_global";

Astro automagically rolls everything up (including component css) into an external css file. Freaking love Astro.

Removing Tailwind Base Styles

integrations: [
  tailwind({
    applyBaseStyles: false,
  }),
],

Tailwind Media Queries Reference

/*
min-width

sm  - 640px  - @media (min-width: 640px) { ... }
md  - 768px  - @media (min-width: 768px) { ... }
lg  - 1024px - @media (min-width: 1024px) { ... }
xl  - 1280px - @media (min-width: 1280px) { ... }
2xl - 1536px - @media (min-width: 1536px) { ... }

max-width

sm  - 640px  - @media (max-width: 640px) { ... }
md  - 768px  - @media (max-width: 768px) { ... }
lg  - 1024px - @media (max-width: 1024px) { ... }
xl  - 1280px - @media (max-width: 1280px) { ... }
2xl - 1536px - @media (max-width: 1536px) { ... }
*/