How to get started?
Once the integration is installed, it is as easy as adding .mdx files within your src/pages/ directory to get started. Let’s swap our project’s index.astro for an index.mdx to test this out. Regardless if you’re building with Astro or not, please note these two files are not one-to-one. A standalone *.mdx file does require an HTML boilerplate to give our browser the full information about our project. So let’s see how Astro helps us with this.
We can interact with our *.mdx files from the perspective of two parts: (1) Frontmatter, a composable YAML-based section to declare your document’s meta data and (2) the body composed of MDX-syntax content.
---
layout: ../layouts/Page.astro
title: Index
# <- These key-value pairs will be accessible via
# <- the `frontmatter` property from any `.astro` file
---
# Hello world
<!-- This content will be accessible via -->
<!-- the `<slot /> element -->Anything written in inside the frontmatter fence (---) is accessible via the frontmatter property. So you can expect title in addition to the Astro provided key-value pairs to result in a payload like this (except for layout):
{
title: 'Index',
file: '/../../../../../src/pages/index.mdx',
url: '',
astro: {}
}Where does TailwindCSS come in?
Let’s get back to that layout property we declared in our frontmatter. Think of Layouts as reusable page shells where you’d inject content using the <slot /> element. They are useful for all of your HTML boilerplate and common UI elements (such as headers, navbars, footers and more). Layout components are commonly placed in a src/layouts directory in your project. So let’s add a Page.astro layout file to see how that looks:
---
<!-- Server-side scripting can be done here -->
const { frontmatter: title } = Astro.props;
---
<html lang="en">
<head>
<title>{title}</title>
</head>
<body>
<article>
<h1>{title}</h1>
<slot /> <!-- Your content is injected here -->
</article>
</body>
</html>Here is where you have HTML markup available to style your Astro project using TailwindCSS. In Astro, you are able to use the standard kebab-case format for all HTML attributes instead of the camelCase used in JSX. It even works for class, which is not supported by React.