Comments (15)
from sutil.
Output from build
> @ tailwind /Users/david/projects/sutil-template-tailwind
> NODE_ENV=production tailwindcss-cli build -o public/tailwind.css
tailwindcss 2.1.1
🚀 Building from default CSS... (No input file provided)
✅ Finished in 2.14 s
📦 Size: 10.08KB
💾 Saved to public/tailwind.css
ℹ 「wds」: Project is running at http://localhost:8080/
ℹ 「wds」: webpack output is served from /
ℹ 「wds」: Content not from webpack is served from ./public
ℹ 「wdm」: asset bundle.js 1.48 MiB [emitted] (name: main)
We can see the purge has take the CSS down from a potential 3MB to 10KB
from sutil.
I'm not sure what you mean by vscode plugin. Can you explain a little more? (I use vscode, and plugins, including Ionide, but I'm not sure what you want to leverage).
I meant the link I gave in the first message tailwindlabs/tailwindcss-intellisense#154
from sutil.
Is this something that's still on the roadmap? I also think that CSS frameworks should be external to the core library and Bulma shouldn't be included by default.
from sutil.
Thank for the very nice message, I appreciate that.
I agree with you, Bulma will become an additional package at some point. However, you can ignore it. If you write your code like this:
Html.div [
class' "w-64 h-3 bg-gradient-to-br"
]
and include tailwindcss
into the index.html
, it should work just fine.
I'll be happy to put together a working example later if you like.
What we could also do is think about an F# wrapper for tailwind
too.
from sutil.
I see, my initial thought was that since some work was done for Feliz engine and Sutil uses it, then it can leverage vscode plugin as well, but it doesn't seem to be the case, right? Another big feature of tailwind is the ability to purge unused css, just referencing the whole thing won't make it happen
from sutil.
Feliz was reimplemented in Feliz.Engine, and Feliz.Bulma was ported to Bulma.Engine, partly to support Sutil, but also to support any DOM DSL or application that wants to build DOM.
I'm not sure what you mean by vscode plugin. Can you explain a little more? (I use vscode, and plugins, including Ionide, but I'm not sure what you want to leverage).
Regarding unused CSS: I remember seeing something about that. Let me look into it. At this time, I don't know how the unused CSS is being purged. It's possible we can make that work, but I'll need to study it.
from sutil.
..OK.. it's possible we can make use of tailwind's purgecss
command - it works by searching for class names, and then (I think) strips out unused rules from the CSS. In theory, this could work without any modifications as part of the fable build sequence.
from sutil.
https://tailwindcss.com/docs/optimizing-for-production
from sutil.
An update: I have Sutil using tailwind, and purging unused classes. I will check something in later.
Next steps:
- Check basic example in
- Either add intellisense support or create as typed-wrapper (like the Bulma Engine in Sutil). Otherwise you can't tell if you've used a valid class name.
I notice that we may be able to get some use of the Sutil feature 'addClass':
let appStyle = [
rule "button" [
addClass "bg-red-50 p-2"
// Other css styles if you like, but then that's a little non-tailwind
]
]
This says that any <button>
element will have classes bg-red
and p-2
from sutil.
As I said, I'll create a new repo sutil-template-tailwind
, but here's how it looks so far.
module App
open Sutil
open Sutil.DOM
open Sutil.Attr
let view() =
Html.div [
class' "p-1 bg-gray-200 text-red-400"
text "Hello World"
]
view() |> mountElement "sutil-app"
Here's my package.json
(I didn't see the point in complicating the webpack.config.js
, but you may disagree)
{
"private": true,
"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:prod && webpack --mode production",
"tailwind:prod": "NODE_ENV=production tailwindcss-cli build -o public/tailwind.css",
"tailwind": "tailwindcss-cli build -o public/tailwind.css"
},
"dependencies": {
"webpack": "^5.11.0",
"webpack-cli": "^4.2.0",
"webpack-dev-server": "^3.11.0"
},
"devDependencies": {
"autoprefixer": "^10.2.5",
"postcss": "^8.2.10",
"tailwindcss": "^2.1.1",
"tailwindcss-cli": "^0.1.2"
}
}
tailwind.config.js
module.exports = {
purge: [
'./src/**/*.fs.js',
],
darkMode: false, // or 'media' or 'class'
theme: {
extend: {},
},
variants: {
extend: {},
},
plugins: [],
}
and finally index.html
<!doctype html>
<html>
<head>
<title>Sutil Hello World</title>
<meta http-equiv='Content-Type' content='text/html; charset=utf-8'>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="shortcut icon" href="fable.ico" />
<link rel="stylesheet" href="tailwind.css"/>
</head>
<body>
<div id="sutil-app"></div>
<script src="bundle.js"></script>
</body>
</html>
from sutil.
Wow, thanks for your help! This is already smth to work with, I think this issue can be closed once separate repos are created
from sutil.
One more thing. Add this to VSCode's settings.json
, and you can use the Tailwind Intellisense plugin :-)
"tailwindCSS.experimental.classRegex": [
"class'\\s+\"([^\"]*)\""
],
"tailwindCSS.includeLanguages": {
"fsharp": "html",
"fs": "html"
}
from sutil.
Example repo here, as promised:
https://github.com/davedawkins/sutil-template-tailwind
from sutil.
I agree with you. It's not a bad time to split these into separate libraries. I'm pleased people are still interested, thank you
from sutil.
Related Issues (20)
- Cert expired for sutil.dev? HOT 2
- An example of sutil use, aspect ratio. HOT 1
- How Sutil works? HOT 6
- Bunch of css properties missing HOT 1
- lazy loading/bindPromise HOT 3
- Difference between bindElementC and bindElementCO HOT 1
- checkbox has checked=false when used with two way binding HOT 3
- Compatibility with code produced from Html2Feliz HOT 7
- Is HMR (hot module replacement) available in Sutil? HOT 1
- Props never get updated in WebComponent with elmish HOT 2
- Link to github source leads to 404 HOT 1
- New nuget release including Bind.radioValue ? HOT 8
- Many pages of the documentation don't load properly HOT 4
- Getting Started docs HOT 6
- Elmish performance improvements? HOT 7
- Documentation: Store.distinct example does not compile when "Open in Repl". HOT 2
- Any chance of jsx getting implemented HOT 3
- Html Option: Attr.selected always generates HOT 1
- Could we have a Store.mapStore and Store.mapRStore HOT 2
- Browser navigation and node rebuilds HOT 4
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from sutil.