Hello! I'm brand new to CSS-in-JS and Tailwind. How does one use you

<a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/us

Question: How to use your blocks? about tailblocks HOT 2 CLOSED

mertjf commented on May 22, 2024

Question: How to use your blocks?

from tailblocks.

Comments (2)

commented on May 22, 2024 3

@szepeviktor So essentially, Tailwind allows developers/designers to perform most CSS tasks using class names rather than having the write the CSS yourself.

For example, instead of doing the following:

<body>
  <div class="box">Hello, World!</div>
</body>
<style>
  .box {
    border: 8px solid gray;
  }
</style>

you would do this:

<body>
  <div class="border-8 border-gray-600">Hello, World!</div>
</body>

There's a few ways you can setup Tailwind in your project: linking from a CDN (not recommended) or installing Tailwind and PurgeCSS with NPM (recommended).

This project gives you commonly used templates using Tailwind's utility classes. To use the site:

Find a template that you need with the icons in the left sidebar.
Select the color scheme you want in the top toolbar.
Select whether you want a dark or light version in the top toolbar.
Click "View Code" in the top toolbar.
Copy the code into your .html file, into the tags of your Vue component, or into the render method of your React app, etc.

from tailblocks.