Creating a Tailwind CSS sample site with XM Cloud - Part 6 Applying Tailwind CSS to Next.js
Since the samples provided in the Starter Kit are created using Bootstrap 5, we will rewrite the Next.js samples to use Tailwind CSS.
XM Cloud
A world-class, enterprise-ready CMS that allows you to quickly create, manage, and deliver the right content everywhere.
Creating a Tailwind CSS Sample Site with XM Cloud - Part 5 Serialization
Items created in Sitecore XM Cloud can be serialized as YAML files using the Sitecore CLI tools. This time, we will use this mechanism to manage site information on GitHub.
Creating a Tailwind CSS Sample Site with XM Cloud - Part 4 Creating a New Site
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.
Creating a Tailwind CSS Sample Site with XM Cloud - Part 3 Protecting .env Files
I have been wondering how best to handle .env files when introducing Tips on the blog, but I will reflect this since it was introduced in XM Cloud Tutorials #4.
Creating a Tailwind CSS Sample Site with XM Cloud - Part 2 Deploying to XM Cloud
Previously, we used XM Cloud's project template to create a repository on GitHub, create a branch, and add a new Next.js project. This time, we will deploy this to XM Cloud.
Creating Tailwind CSS Sample site in XM Cloud - Part 1. Create New Repository
I would like to create a sample using the tips I have been introducing in my blog. This time, we will create the base of a sample that can use Tailwind CSS.
Create a new project in XM Cloud
We have been covering XM Cloud on our blog for some time now, and now that the project creation screen has been enhanced, we will once again be creating a CMS with the latest screens.
Confirmation of Rendering Contents Resolvers operation
In this article, we will focus on a useful feature provided by Sitecore XM / XM Cloud: Rendering Contents Resolvers. Multiple definitions are provided in the rendering definitions, which can be used to efficiently create components.
Add NextUI Package
The sample already in operation at hand uses Tailwind.css, but we would like to go one step further and apply NextUI this time. This is a user interface tool provided by Vercel, which offers Next.js.
Check the sample code of Bring own your component
In the last issue, we proceeded to place and run the sample code. This time, we would like to check what kind of code is needed and in what form the data is held. What kind of code is needed to be written and in what form will the data be held?
Add components with Bring own your component
In this blog series, we've covered components registering with Headless SXA and those created without code using Sitecore Components. Now, we'll introduce a different implementation involving a component.
Linking Sitecore Components content with Sitecore items
Previously, we created fixed images and text for the components and pasted them onto the page, but this time we want to add our own template and use that data to render the components.