Here is a list of classes I add when I'm starting a new project:
<html class="min-h-screen bg-white font-sans text-sm text-gray-950 antialiased">
...
</html>
Here's a breakdown:
min-h-screen: This class ensures that the content of your web page takes up at least the full height of the user's screen. It's especially useful for ensuring that your website looks well-proportioned on various devices, preventing any unwanted gaps or scrolling issues.bg-white: Setting the background color to white as a default helps maintain a clean and neutral canvas to start with. Of course, you can always modify this background color to match your project's branding or design theme later on.font-sans: This class applies a sans-serif font family to your text, offering a clean and modern typography style. Like the background color, you can easily customize the font family according to your project's requirements.text-sm: Tailwind CSS provides a range of text sizing classes, and text-sm sets the base font size to small. This ensures that your text is legible without being too large and gives you room to adjust text sizes as needed for different sections of your project.text-gray-950: The text-gray-950 class assigns a specific shade of gray (#030712) to the text color. Using a consistent text color helps maintain readability and visual harmony throughout your project. You can always replace this color with your preferred palette.antialiased: Antialiasing is a technique that smooths the jagged edges of text and images, resulting in a cleaner and more polished appearance. Adding this class ensures that your text and visuals are displayed with improved clarity.
Happy Coding!
Top comments (0)