Tailwind CSS | Notion

Step 1: Set Up Your Project

Create an HTML file: Open your favorite text editor (like VS Code, Sublime Text, or Atom) and create a new HTML file. You can name it index.html.

Link Tailwind CSS via CDN: Add the <script> tag provided in your question to the <head> section of your HTML file. This will load Tailwind CSS from a CDN.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My First Tailwind CSS Page</title>
    <script src="<https://cdn.tailwindcss.com>"></script>
</head>
<body>
    <!-- Your content will go here -->
</body>
</html>

Step 2: Basic HTML Structure

Add some basic HTML elements: Inside the <body> tag, add some basic HTML elements to work with. For example:

<body>
    <header class="bg-blue-500 text-white p-4">
        <h1 class="text-3xl">Welcome to My Website</h1>
    </header>

    <main class="p-4">
        <section class="bg-gray-100 p-4 mb-4">
            <h2 class="text-2xl font-bold">About Me</h2>
            <p class="text-gray-700">I am a beginner learning Tailwind CSS.</p>
        </section>

        <section class="bg-white p-4">
            <h2 class="text-2xl font-bold">Contact Me</h2>
            <form>
                <div class="mb-4">
                    <label for="name" class="block text-gray-700 font-bold mb-2">Name</label>
                    <input type="text" id="name" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" />
                </div>
                <div class="mb-6">
                    <label for="email" class="block text-gray-700 font-bold mb-2">Email</label>
                    <input type="email" id="email" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" />
                </div>
                <button type="submit" class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline">Submit</button>
            </form>
        </section>
    </main>

    <footer class="bg-gray-800 text-white p-4 text-center">
        <p>&copy; 2023 My Website</p>
    </footer>
</body>

Step 3: Customize Your Styles

Explore Tailwind Classes: Tailwind CSS uses utility classes to style your elements. The classes you see in the example above are just a starting point. You can customize them further by exploring the Tailwind CSS documentation.
- Colors: Use classes like bg-blue-500, text-white, etc., to set background and text colors.
- Spacing: Use classes like p-4, m-4 for padding and margin.
- Typography: Use classes like text-3xl, font-bold, etc., to control font size and weight.
- Borders and Shadows: Use classes like border, rounded, shadow, etc., to add borders and shadows.
Responsive Design: Tailwind CSS also provides responsive design utilities. You can use classes like sm:, md:, lg:, etc., to apply styles at different breakpoints.

Example:
```
<div class="flex flex-col sm:flex-row">
    
</div>
```

Step 4: Test Your Page

Open your HTML file in a browser: Save your index.html file and open it in a web browser to see your styled page. You should see a simple website with a header, main content, and footer, all styled using Tailwind CSS.

Step 5: Learn More

Explore Further: Tailwind CSS has a lot more to offer. As you become more comfortable, explore additional features like:
- Forms: Tailwind CSS has utility classes for styling form elements.
- Grid Layouts: Use grid classes to create complex layouts.
- Components: Build reusable components using Tailwind CSS.
Documentation: Refer to the official Tailwind CSS documentation for more detailed information and advanced usage.

By following these steps, you should be able to get started with Tailwind CSS and start building beautiful, responsive websites. Happy coding!