Skip to content

docs(styled/install): add steps for Tailwind CSS configuration for JetBrains IDEs #1069

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

Merged
merged 1 commit into from
Apr 23, 2025
Merged

docs(styled/install): add steps for Tailwind CSS configuration for JetBrains IDEs #1069

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
20 changes: 15 additions & 5 deletions apps/website/src/routes/docs/styled/(getting-started)/install/index.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -263,11 +263,11 @@ This way you can now `import { Accordion, Alert, ... } from '~/components/ui';`

(**small tip:** you can comment out the components you don't use!)

## Tailwind CSS IntelliSense VSCode extension
## Tailwind CSS editor extension

If you don't already have it, go ahead and install the [Tailwind CSS IntelliSense](https://marketplace.visualstudio.com/items?itemName=bradlc.vscode-tailwindcss) extension for vscode.
You can configure your code editor to recognize the Qwik UI utility functions. This gives you the same auto-completion that you get for the default Tailwind CSS classes.

Then, edit your [settings.json](https://code.visualstudio.com/docs/getstarted/settings) with the following:
Use the following configuration with your chosen editor:

```json
{
Expand All @@ -278,6 +278,16 @@ Then, edit your [settings.json](https://code.visualstudio.com/docs/getstarted/se
}
```

This will enable the extension to recognize the Qwik UI utility functions and give you the same autocompletion you get with the default Tailwind classes.

You can thank us later... 😉

### VSCode

The [Tailwind CSS IntelliSense](https://marketplace.visualstudio.com/items?itemName=bradlc.vscode-tailwindcss) extension is available to download for VSCode.

Install it, open your [settings.json](https://code.visualstudio.com/docs/getstarted/settings) file, and append the provided configuration.

### JetBrains IDEs

The [Tailwind CSS](https://plugins.jetbrains.com/plugin/15321-tailwind-css) plugin is already bundled with JetBrains IDEs.

[Click here](jetbrains://idea/settings?name=Languages+%26+Frameworks--Style+Sheets--Tailwind+CSS) to navigate to _Settings_ > _Languages & Frameworks_ > _Style Sheets_ > _Tailwind CSS_, and append the provided configuration.