Update distribution

milesmcc · Aug 25, 2020 · cd84c28 · cd84c28
1 parent 66513bc
commit cd84c28
Show file tree

Hide file tree

Showing 3 changed files with 4 additions and 3 deletions.
diff --git a/dist/a17t.css b/dist/a17t.css
diff --git a/docs/assets/css/dist/a17t.css b/docs/assets/css/dist/a17t.css
diff --git a/docs/index.md b/docs/index.md
@@ -257,10 +257,11 @@ title: "The atomic web toolkit for pragmatists"
         <div class="card ~neutral !high font-mono mb-4">
           npm install a17t
         </div>
-        <p class="mb-6">Import a17t in your JavaScript using <code>import 'a17t'</code>. For more information about
+        <p class="mb-2">Import a17t in your JavaScript using <code>import 'a17t'</code> or into your preprocessed CSS using <code>@import 'a17t';</code>. For more information about
           CSS-in-JS, see <a href="https://css-tricks.com/the-many-ways-to-include-css-in-javascript-applications/">
           this guide</a>. a17t's default export is simply its compiled CSS file, so you have no shortage of options
           to import it.</p>
+        <p class="mb-6">Optionally use a17t's Tailwind distribution in your JavaScript with <code>import 'a17t/dist/tailwind.css'</code> or in your CSS with <code>@import 'a17t/dist/tailwind.css'</code>. The benefit of using a17t's Tailwind CSS distribution is that it uses the same CSS variables as a17t. That way, if you change your color scheme (for example), your Tailwind classes will change as well. (Note that the color names for a17t's Tailwind distribution match other a17t's naming system&mdash;e.g., the class for light grey text is `text-neutral-300`.)</p>
         <p class="mb-2 label">Using a CDN</p>
         <div class="card ~neutral !high font-mono mb-4 text-sm">
           &lt;link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/a17t@latest/dist/a17t.css"&gt;