https://github.com/davedawkins/sutil-template-tailwind

https://github.com/davedawkins/sutil-template-tailwind

Last synced: about 1 month ago
JSON representation

• Host: GitHub
• URL: https://github.com/davedawkins/sutil-template-tailwind
• Owner: davedawkins
• Created: 2021-04-18T21:37:18.000Z (over 3 years ago)
• Default Branch: main
• Last Pushed: 2023-02-19T11:12:02.000Z (over 1 year ago)
• Last Synced: 2024-07-02T02:38:45.625Z (2 months ago)
• Language: JavaScript
• Size: 10.7 KB
• Stars: 7
• Watchers: 1
• Forks: 2
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md

Awesome Lists containing this project

• awesome-sutil - sutil-template-tailwind - Sutil Template for Tailwind, by Dave Dawkins (Sample Apps)

README

        
## Sutil Template for Tailwind

The `Sutil Hello World` program, but using Tailwind, with:

- CSS purging (using tailwindcss-cli)

- IntelliSense (using Tailwind CSS Intellisense plugin)

### Quick Start

```shell

git clone -s https://github.com/davedawkins/sutil-template-tailwind.git

cd sutil-template-tailwind

dotnet tool restore

npm install

npm run start

```

### Adding Tailwind to an Existing Project

Install Tailwind:

```shell

npm add -D tailwindcss tailwindcss-cli cross-env

```

Set your build scripts to something like this:

```json

"scripts": {

    "start": "dotnet fable watch src/App --runWatch npm run pack",

    "build": "dotnet fable       src/App --run npm run pack:prod",

    "pack": "npm run tailwind && webpack serve",

    "pack:prod": "npm run tailwind && webpack --mode production",

    "tailwind": "cross-env NODE_ENV=production tailwindcss-cli build -o public/tailwind.css"

}

```

Add a reference to generated CSS file `tailwind.css` in your `index.html`

```html

  

```

### Referencing Tailwind in a Sutil App

Use `Attr.className` to specify the Tailwind classes:

```fs

open Sutil

Html.div [

    Attr.className "bg-red-400 text-sm p-1"

    // ...

]

```

There is a helper for `div` in the form of `Html.divc`:

```fs

open Sutil

Html.divc "bg-red-400 text-sm p-1" [

    // ...

]

```

For the best experience, and to minimise the chance of specifying incorrect class names, install

the Tailwind CSS IntelliSense plugin (for VSCode). Add the following to `settings.json`:

```json

"tailwindCSS.experimental.classRegex": [

    "Attr\\.className\\s+\"([^\"]*)\"",

    "Html\\.divc\\s+\"([^\"]*)\"",

    "class'\\s+\"([^\"]*)\""

],

"tailwindCSS.includeLanguages": {

    "fsharp": "html"

}

```