We have used Tailwind CSS for this project so we can use all the css classes and styles given in the tailwind css docs. You can have an extensive tutorial of all utility classes in the tailwind docs, but in this guide we will show some classes and styling you might be using frequently with some of the components, rest you can go crazy with the help of the official docs.
Styling Texts
Text component is used to add text with some default styling in your article. You can see the demo and guide here. With tailwind css utility classes we can change font size, font weight, color, and other text manipulation utilities classes shown in tailwind css text docs, by adding the classes in className="" attribute. Example: <Text className="text-[20px] text-blue-500 font-bold">Lorem ipsum dummy text</Text> You can override default styles by adding "!" in front of classes like className="!font-bold md:!text-[50px] md:!font-semibold".
Spacing - Paddings and Margins
To add padding and margins follow the guide given here.
Background color and images
For background color follow the guide given here. For background image use the syntax className="bg-[url('/public/images/tutorials/demo-image.jpg)]". For more info follow the guide given here.
Light and Dark mode
We have a setup for dark and light mode by default. You can see the styling doc on how to change your styles with respect to light or dark theme here.
Mobile responsive styles.
For different screen sizes we can give different stylings or classes with the help of some breakpoint identifiers or prefixes namely sm, md, lg, xl, 2xl. We will be majorly using md: for medium screen devices like tablets and lg: for large screen devices like laptops and desktops.
Example: lets say we want to give a text font size of 14px in mobile devices, 18px in medium sceen devices and 28px for large devices, our className will look like this className="text-[14px] md:text-[18px] lg:text=[28px]". When we dont give any prefix the style gets applied to all scrren sizes like className="text-[14px]".
These are some the basics you need to know about changing the styling with tailwind css, go to the official docs for more info and if you have any issues or queries please feel free to write us at webexpe13@gmail.com or drop a comment on our github discussions github.com/nmayur/nextjs-simple-blog-template/discussions.