From 79f6e1e60118647f8954a2ab00273fabffaa0333 Mon Sep 17 00:00:00 2001 From: Simon Holthausen Date: Tue, 25 Aug 2020 19:17:04 +0200 Subject: [PATCH] (docs) how to integrate TailwindCSS Fixes #182, #461 --- docs/README.md | 1 + docs/preprocessors/other-css-preprocessors.md | 12 ++++++++++++ 2 files changed, 13 insertions(+) create mode 100644 docs/preprocessors/other-css-preprocessors.md diff --git a/docs/README.md b/docs/README.md index f7a0c6a57..3c35580da 100644 --- a/docs/README.md +++ b/docs/README.md @@ -13,6 +13,7 @@ Do you want to use TypeScript/SCSS/Less/..? See [Using with preprocessors](#usin #### Language specific setup - [SCSS/Less](./preprocessors/scss-less.md) +- [Other CSS languages, TailwindCSS](./preprocessors/other-css-preprocessors.md) - [TypeScript](./preprocessors/typescript.md) ## Documenting components diff --git a/docs/preprocessors/other-css-preprocessors.md b/docs/preprocessors/other-css-preprocessors.md new file mode 100644 index 000000000..3f3159fa2 --- /dev/null +++ b/docs/preprocessors/other-css-preprocessors.md @@ -0,0 +1,12 @@ +# Using other CSS-languages than CSS/Less/SCSS + +The svelte-language-server and therefore the VSCode extension can only handle CSS/Less/SCSS syntax. To get other syntaxes working, read on. + +## TailwindCSS + +We assume you already have setup TailwindCSS within your Svelte project. If not, [this article](https://dev.to/inalbant/a-simpler-way-to-add-tailwindcss-to-your-svelte-project-11ja) and [this article](https://dev.to/sarioglu/using-svelte-with-tailwindcss-a-better-approach-47ph) explain two approaches on how to do it. + +To use TailwindCSS with the VSCode extension: + +1. Install the [Tailwind CSS VSCode extension](https://marketplace.visualstudio.com/items?itemName=bradlc.vscode-tailwindcss) +2. Either add `lang="postcss"` to each of your `