Create a Tailwind CSS Component

Tailwind CSS component

Create and open services/web/src/components/tailwindcss.svelte. Click Run and execute the following commands:

cd services/web

touch src/components/tailwindcss.svelte

nano $_

Add the following content to tailwindcss.svelte to import all prepared Tailwind CSS style classes:

<style global>
  @tailwind base;
  @tailwind components;
  @tailwind utilities;
</style>

You will use that component in the src/routes/_layout.svelte to make sure it is included on all pages. Open the file using nano and simply import the component.

<script>
  ...
  import TailwindCSS from '../components/tailwindcss.svelte';
  ...
</script>

Add the component right below the closing </style> element as:

</style>
<TailwindCSS />
...