Skip to content
Open
Changes from all commits
Commits
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
53 changes: 53 additions & 0 deletions docs-src/0.7/src/guides/utilities/tailwind.md
Original file line number Diff line number Diff line change
Expand Up @@ -30,6 +30,9 @@ cargo install dioxus-cli

### Bonus Steps

<details>
<summary>VSCode</summary>

1. Install the Tailwind CSS VSCode extension
2. Go to the settings for the extension and find the experimental regex support section. Edit the setting.json file to look like this:

Expand All @@ -40,6 +43,56 @@ cargo install dioxus-cli
},
```

</details>

<details>
<summary>Neovim</summary>

1. Create new file **`~/.local/nvim/lua/custom/dioxus-tailwind.lua`**:

```lua
local paths_to_check = { '/', '/../', '/../../' }
local is_dx = false
local cwd = vim.fn.getcwd()

-- detect dioxus project
for _, value in pairs(paths_to_check) do
if vim.uv.fs_stat(cwd .. value .. 'Dioxus.toml') then
is_dx = true
break
end
end

-- this configuration causes regular html to not work anymore
-- so we only apply it if we're actually in a dioxus project
if is_dx then
vim.notify("dioxus project detected; altering tailwind LSP config...")
vim.lsp.config("tailwindcss", {
filetypes = {'rust'},
settings = {
tailwindCSS = {
includeLanguages = { rust = "html", },
experimental = {
classRegex = {
-- if this option gets removed, bob help you
'class: "(.*)"',
}
}
}
}
})
vim.lsp.enable("tailwindcss")
end
```

2. Add to **`~/.local/nvim/init.lua`**

```lua
require('custom.dioxus-tailwind')
```

</details>

## Development

- Run the following command in the root of the project to start the Tailwind CSS compiler:
Expand Down