![]() If you want to simplify this step, you can just copy the file I created to get started.įollow along with the commit! Step 2: Adding Tailwind CSS via CDN For the content, you can use whatever you want, but I'm going to use fillerama.io so the filler content is a bit more fun. You can get started by simply creating a new HTML file. The hope is that by focusing on Tailwind and not the app, we can get a better understanding of what's actually happening with the framework. ![]() We're going to start off by applying Tailwind CSS straight to a static HTML page. While Tailwind has a lot more going for it, we're going to focus on these basics for this tutorial, so let's dig in! Part 1: Adding Tailwind CSS to a static HTML page ![]() btn class by applying those utility class to that selector. btn that is created with a bunch of CSS attributes directly, in Tailwind, you would either apply a bunch of classes like bg-blue-500 py-2 px-4 rounded to the button element or build a. Taildwind's solution is to provide a wide variety of CSS classes that each have their own focused use. The underlying goal is that as you're building your project, you don't need to deal with cascading styles and worrying about how to override that 10-selector pileup that's been haunting your app for the last 2 years. Tailwind CSS is a "utility-first" CSS framework that provides a deep catalog of CSS classes and tools that lets you easily get started styling your website or application.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |