Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Question: How to use your blocks? #14

Closed
szepeviktor opened this issue May 28, 2020 · 2 comments
Closed

Question: How to use your blocks? #14

szepeviktor opened this issue May 28, 2020 · 2 comments

Comments

@szepeviktor
Copy link

Hello! I'm brand new to CSS-in-JS and Tailwind.

How does one use your blocks? Copy & paste?
@ghost
Copy link

ghost commented May 28, 2020 •
edited by ghost

@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:

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

@szepeviktor
Copy link
Author

Thank you!
I suspected copy & paste.

tmr08c added a commit to tmr08c/tailblocks that referenced this issue May 31, 2020
@tmr08c
Adds "how to use this project" to the README
d555e49 
Since this project is not a traditional dependency [it may not be
obvious](mertJF#14) how it is
expected to be used.

This commit adds a section to the README that can hopefully make it
easier to know how to use this project.
@tmr08c tmr08c mentioned this issue May 31, 2020
Merged
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
1 participant
@szepeviktor