Here’s a simple practice exercise for getting started with Tailwind:
- Create a new HTML file and include the necessary stylesheets for Tailwind (see the tutorial for steps 2-3).
- Add a new
div
element to the HTML file, with the following attributes:- a class of
w-1/2
- a class of
h-40
- a class of
bg-blue-500
- a class of
rounded-md
- a class of
- Inside the
div
element, add a newh1
heading with the text “Welcome to Tailwind!”. - Add a new
button
element below the heading, with the following attributes:- a class of
px-4
- a class of
py-2
- a class of
bg-green-500
- a class of
text-white
- a class of
rounded-lg
- a class of
- Inside the button, add the text “Get Started”.
- Save the file and open it in a web browser. You should see the blue rectangle with the heading and button inside it.
- Experiment with different Tailwind classes to customize the design. For example, you can change the background color of the button or add spacing between elements using padding and margin classes.
This simple exercise demonstrates how you can use Tailwind classes to quickly create custom designs without having to write a lot of CSS code. With a little experimentation, you can create unique and professional-looking designs for your web projects.