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.
Information on Headless SXA based on Next.js available in Sitecore
Since the samples provided in the Starter Kit are created using Bootstrap 5, we will rewrite the Next.js samples to use Tailwind CSS.
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.
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.
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.
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.
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.
Applying the behavior of the previous LinkList, I would like to create a breadcrumb list component this time.
In this article, we will check how the LinkList component, a component of Headless SXA, is defined.
In the last issue, we ran the new Next.js project, and you can actually see the differences from 21.4.0 to 21.5.0. Since we are here, let's take a look.
I have been using the Haedless SXA project included in the project, but is there any difference between this and the Next.js that has been offered before? This time, we will proceed to prepare and run the new Next.js application.
ChatGPT, which is breaking out this year as a generative AI, presents us with JavaScript and TypeScript samples. In this article, we would like to use the code generated by ChatGPT to create a component for XM Cloud.
Creating a Sitecore component allows you to easily create a drag-and-drop component. In this article, we will introduce a wizard to help you create this component. The previously introduced steps are as follows
Showing 1 to 12 of 28 results