Recently delving into learning AstroJS, I stumbled upon some intriguing templates on GitHub. One thing that caught my attention was the <Fragment> tag which seemed to be related to directives based on the astro documentation. Below is a snippet of the code for reference:
<Fragment slot="title">
Free template for <span class="hidden xl:inline">creating websites with</span>
<span class="text-accent dark:text-white highlight"> Astro 4.0</span> + Tailwind CSS
</Fragment>
Upon further investigation, I noticed the usage of a parameter called "slot". Curious about the definition of Fragment, I explored the file env.d.ts.
/// <reference path="./client.d.ts" />
// Caution! The types here are only available inside Astro files (injected automatically by our language server)
// As such, if the typings you're trying to add should be available inside ex: React components, they should instead
// be inside `client.d.ts`
type Astro = import('./dist/@types/astro.js').AstroGlobal;
// We have to duplicate the description here because editors won't show the JSDoc comment from the imported type
// However, they will for its properties, ex: Astro.request will show the AstroGlobal.request description
/**
* Astro global available in all contexts in .astro files
*
* [Astro documentation](https://docs.astro.build/en/reference/api-reference/#astro-global)
*/
declare const Astro: Readonly<Astro>;
declare const Fragment: any;
declare module '*.html' {
const Component: (opts?: { slots?: Record<string, string> }) => string;
export default Component;
}
Despite not finding any mention of a slot parameter, the functionality seems to work seamlessly. The current slot being used is "title" which results in a larger font size, while changing it to "subtitle" reduces the font size. There is no specific tailwind declaration associated with "title." I've included the contents of the tailwind.config.cjs file below:
import defaultTheme from 'tailwindcss/defaultTheme';
import typographyPlugin from '@tailwindcss/typography';
module.exports = {
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)',
},
fontFamily: {
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',
};
If anyone could shed light on this interesting behavior, your insights would be much appreciated. You can find more details in the repository linked above.