summaryrefslogtreecommitdiff
path: root/examples/snowpack/src/pages/guides/tailwind-css.md
diff options
context:
space:
mode:
authorGravatar Nate Moore <natemoo-re@users.noreply.github.com> 2021-04-26 16:54:20 -0500
committerGravatar GitHub <noreply@github.com> 2021-04-26 15:54:20 -0600
commitdea1a6dfc9dec54034d2b872b4cd36c0174814c6 (patch)
tree49569a511201b4defc23b6654b475e458452596a /examples/snowpack/src/pages/guides/tailwind-css.md
parent0ea4a986e207238bf0ac1db841b2a5d5b567d84d (diff)
downloadastro-dea1a6dfc9dec54034d2b872b4cd36c0174814c6.tar.gz
astro-dea1a6dfc9dec54034d2b872b4cd36c0174814c6.tar.zst
astro-dea1a6dfc9dec54034d2b872b4cd36c0174814c6.zip
Update defaults directory structure to `src` and `dist` (#132)
* chore: update defaults in docs * chore: update config defaults * test: update tests to config defaults * chore: update gitignore to new defaults * docs: update readme to new defaults * chore: update examples to new defaults * chore: update default exclude in lang server * chore: update tests * test: fix failing tests * chore: update www defaults
Diffstat (limited to 'examples/snowpack/src/pages/guides/tailwind-css.md')
-rw-r--r--examples/snowpack/src/pages/guides/tailwind-css.md57
1 files changed, 57 insertions, 0 deletions
diff --git a/examples/snowpack/src/pages/guides/tailwind-css.md b/examples/snowpack/src/pages/guides/tailwind-css.md
new file mode 100644
index 000000000..a0643b69e
--- /dev/null
+++ b/examples/snowpack/src/pages/guides/tailwind-css.md
@@ -0,0 +1,57 @@
+---
+layout: ../../layouts/content.astro
+title: 'Tailwind CSS'
+tags: communityGuide
+published: true
+img: '/img/logos/tailwind.svg'
+imgBackground: '#f2f8f8'
+description: How to use Tailwind CSS with Snowpack.
+---
+
+[Tailwind](https://tailwindcss.com) is a popular class-based CSS utility library.
+
+### Using Tailwind with Native CSS
+
+The easiest way to use Tailwind is via native CSS `@import` _or_ JS `import`.
+
+```css
+/* index.css */
+@import 'tailwindcss/dist/tailwind.css';
+```
+
+```js
+/* index.js */
+import 'tailwindcss/dist/tailwind.css';
+```
+
+This imports Tailwind's full CSS build into your application. This simple usage comes at the cost of performance: Tailwind's full CSS build is 3.5+ MB of CSS. For any serious production use, the Tailwind team **strongly** recommends using [PostCSS](https://postcss.org/).
+
+#### Using Tailwind with PostCSS
+
+Follow our [PostCSS guide](/guides/postcss) to set up PostCSS in your Snowpack project. Then, add Tailwind and autoprefixer as plugins to your `postcss.config.js`:
+
+```js
+// postcss.config.js
+// Taken from: https://tailwindcss.com/docs/installation#using-tailwind-with-postcss
+module.exports = {
+ plugins: [
+ // ...
+ require('tailwindcss'),
+ require('autoprefixer'),
+ // ...
+ ],
+};
+```
+
+Once the plugin is enabled, you can replace your native CSS `dist` imports with Tailwind's more powerful `base`, `components`, and `utilities` imports:
+
+```diff
+/* index.css */
+- @import 'tailwindcss/dist/tailwind.css';
++ @tailwind base;
++ @tailwind components;
++ @tailwind utilities;
+
+```
+
+Follow the official [Tailwind CSS Docs](https://tailwindcss.com/docs/installation/#using-tailwind-with-postcss) for more information.