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.
![](/_next/image?url=https%3A%2F%2Fimages.ctfassets.net%2Fzi1ovlormku8%2F6MNhDX2WnVshMveTRDDXHX%2F38eb33c471bdaf30c9c211fca6f5de88%2Fscott-blake-x-ghf9LjrVg-unsplash.jpg&w=3840&q=75)
Creating a Tailwind CSS Sample Site with XM Cloud - Part 4 Creating a New Site
XM CloudHeadless SXAPublished: 2024-06-26
Site setup
In the first installment of this series, we created a site for testing purposes. The steps are as follows
- Creating Site Collections
- Site Creation
- 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](/_next/image?url=https%3A%2F%2Fimages.ctfassets.net%2Fzi1ovlormku8%2F6Mvi2YN3J6JXZGAOIfko6F%2F0b99dd1b94f2b8649c89f5583595b50f%2Fcreate-tailwindcss-sample-19.png&w=1920&q=75)
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](/_next/image?url=https%3A%2F%2Fimages.ctfassets.net%2Fzi1ovlormku8%2FLOAc5wgsZAKDLwbDrKX1q%2F192f27577b24a3922335849beaa1d050%2Fcreate-tailwindcss-sample-20.png&w=1920&q=75)
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](/_next/image?url=https%3A%2F%2Fimages.ctfassets.net%2Fzi1ovlormku8%2FAqQ4oIAJWvl8pl4upNJc9%2Fe7693cc4742f09a65130eb3e7648b137%2Fcreate-tailwindcss-sample-21.png&w=1920&q=75)
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](/_next/image?url=https%3A%2F%2Fimages.ctfassets.net%2Fzi1ovlormku8%2F5kuf7wJn1Eie5VW1aRCTci%2F3b376741bc0df24bb55eb896575b69b9%2Fcreate-tailwindcss-sample-22.png&w=2048&q=75)
In the Modules tab, two items, Basic site and Standard Values, are not selected.
![create-tailwindcss-sample-23.png](/_next/image?url=https%3A%2F%2Fimages.ctfassets.net%2Fzi1ovlormku8%2F2C4TXdivednm7jisJ9WJ3m%2Fe7926f51c0721d45baa06c56bf346a18%2Fcreate-tailwindcss-sample-23.png&w=2048&q=75)
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](/_next/image?url=https%3A%2F%2Fimages.ctfassets.net%2Fzi1ovlormku8%2F1v7YGw1Dcxyauxg1i0TSog%2Ffc8703bea3a2e12f933e4303b7566421%2Fcreate-tailwindcss-sample-24.png&w=3840&q=75)
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.