diff options
author | 2021-04-26 16:54:20 -0500 | |
---|---|---|
committer | 2021-04-26 15:54:20 -0600 | |
commit | dea1a6dfc9dec54034d2b872b4cd36c0174814c6 (patch) | |
tree | 49569a511201b4defc23b6654b475e458452596a /examples/snowpack/src/pages/guides/tailwind-css.md | |
parent | 0ea4a986e207238bf0ac1db841b2a5d5b567d84d (diff) | |
download | astro-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.md | 57 |
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. |