WH

Astro Theme - Astrowind Styles Organization

Moving Css Variables into tailwind.css

The original Astrowind theme has a CustomStyles.astro file that stores color variables and font asset resources, but this theme also uses tailwind. To make the shared content more localized, the css variables should be stored in the tailwind.css file because then the color variables will then be usable in the tailwind.config.cjs file.

Intuitively, the initial thought would be to also store the font assets in the tailwind.css, but the fonts used are downloaded with fontsource, which uses the import to load the fonts in a JavaScript file. This means that the fonts are better suited to be imported into the CustomStyles.astro file because astro files can handle JavaScript.

The following below examples show how the organization should look

// tailwind.config.js

import defaultTheme from 'tailwindcss/defaultTheme';
import typographyPlugin from '@tailwindcss/typography';

export default {
  content: ['./src/**/*.{astro,html,js,jsx,json,md,mdx,svelte,ts,tsx,vue}'],
  theme: {
    extend: {
      colors: {
        primary: 'var(--aw-color-primary)',
        secondary: 'var(--aw-color-secondary)',
        accent: 'var(--aw-color-accent)',
        default: 'var(--aw-color-text-default)',
        muted: 'var(--aw-color-text-muted)',
        cardinal: 'var(--aw-color-cardinal)',
        'color-supernova': 'var(--aw-color-supernova)',
        supernova: 'rgb(var(--aw-color-supernova) / <alpha-value>)',
      },
      fontFamily: {
        'navine': ['NavineDemo-SemiCondensed', 'sans-serif'],
        sans: ['var(--aw-font-sans, ui-sans-serif)', ...defaultTheme.fontFamily.sans],
        serif: ['var(--aw-font-serif, ui-serif)', ...defaultTheme.fontFamily.serif],
        heading: ['var(--aw-font-heading, ui-sans-serif)', ...defaultTheme.fontFamily.sans],
      },
    },
  },
  plugins: [typographyPlugin],
  darkMode: 'class',
};

---
// CustomStyles.astro

import '@fontsource/arvo';
---

<style is:inline>
  :root {
    --aw-font-sans: 'NavineDemo-SemiCondensed';
    --aw-font-serif: 'Arvo';
    --aw-font-heading: 'NavineDemo-SemiCondensed';
  }

  .dark {
    --aw-font-sans: 'NavineDemo-SemiCondensed';
    --aw-font-serif: 'Arvo';
    --aw-font-heading: 'NavineDemo-SemiCondensed';
  }
</style>

/* tailwind.css */

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

:root {
  --aw-color-primary: rgb(1 97 239);
  --aw-color-secondary: rgb(1 84 207);
  --aw-color-accent: rgb(109 40 217);

  --aw-color-text-heading: rgb(0 0 0);
  --aw-color-text-default: rgb(16 16 16);
  --aw-color-text-muted: rgb(16 16 16 / 66%);
  --aw-color-supernova: rgb(255 204 0);
  --aw-color-cardinal: rgb(209,33,56);

  --aw-color-bg-supernova: var(--aw-color-supernova);
  --aw-color-bg-page: var(--aw-color-supernova);

  --aw-color-bg-page-dark: rgb(3 6 32);
}

@font-face {
  font-family: 'NavineDemo-SemiCondensed';
  src: url('../font/NavineDemo-SemiCondensed.woff2') format('woff2');
}

...