Tailwind Logo

Creating a Tailwind CSS Sample Site with XM Cloud - Part 4 Creating a New Site

XM CloudHeadless SXA

Published: 2024-06-26

In this article, we will create a sample site on XM Cloud. We will also cover which style sheets to use for the site at the end.

Content Update

Please check the latest information on the following page

Site setup

In the first installment of this series, we created a site for testing purposes. The steps are as follows

  1. Creating Site Collections
  2. Site Creation
  3. Style Sheet Settings

Now we will actually work in the local XM Cloud environment.

Creating Site Collections

When you start XM Cloud, there is essentially no site. So we will launch the content editor and proceed to create the site. In the content editor, right-click on the item /sitecore/content to display the menu, then Insert - Headless Site Collection to create a site collection.

create-tailwindcss-sample-19.png

After a few moments, a dialog box for creating a site collection will appear. Here, name the site collection Tailwindcss and click OK with everything checked.

create-tailwindcss-sample-20.png

After a short time, the item is created in the site collection.

Site Creation

Then add a site to the site collection. Right click on an item in the created site collection and a menu will appear. Then add Insert - Headless Site.

create-tailwindcss-sample-21.png

To configure the site, first set Tailwindcss to Site name in the General tab and leave the other items as default.

create-tailwindcss-sample-22.png

In the Modules tab, two items, Basic site and Standard Values, are not selected.

create-tailwindcss-sample-23.png

The Site settings section will proceed as default. Thus, when you click the OK button, the script will run and the new site will be added to the site collection.

Select a style sheet

The default Next.js template also includes a sample design called Basic Site. This sample site uses Bootstrap 5 as the stylesheet.

This time, we will change it to work with Tailwind CSS. This setting is included in the Settings section of the site you created, so change the Grid - Gridmapping item to Tailwind.

create-tailwindcss-sample-24.png

By switching the item to Tailwind, the style sheet for the grid, etc. was changed.

Summary

This time we have created a base sample site. In the next article, we will serialize the site so that it can be managed in the repository so that we do not have to create a site every time.

Tags