Does anyone import Tailwind CSS into tiddlywiki?

[JWHoneycutt]

If so, how do you do it?

JWHoneycutt

[TW Tones]

Jw

In some cases it is as simple as putting the css in a tiddler and taging it with the stylesheet tag. I have done this with w3css others have used basecamp or something like fontawesome.

You can include css via a tiddler with a raw tag as well.

Regards
Tony

[Mat]

Thomas created Bricks (do a search) which is not based on Tailwind but Tachyons which apparently is very similar.

<:-)

[Diego Mesa]

Just checking to see if you managed to do this?

[JWHoneycutt]

What I know so far:

In the tiddler $:/plugins/kookma/shiraz/styles/semantic/bglowtone-colors Mohammad added the ability to change the background color of tiddlers

• The tiddler above is tagged with $:/tags/Stylesheet - so it loads onto the entire TW5.html file
• To use, create any tiddler and enter a field called class with the value bg-lemonchiffon

I think this is a limited example of Tailwind because it uses the bg convention

• Similarly, I can use " blah blah" as background color for a piece of text (color applied in my tiddler, not in copy to Google Groups)
  
• The @@background-color:lemonchiffon; blah blah@@ is visible code when in edit mode

BTW, the "period" in front of class names always confuses me, sometimes I need it, and other times no - ?

But Tailwind does much more, and I therefore assume I can grab alot of the functional code of Tailwind and stuff it into a tiddler with the $:/tags/Stylesheet tag

• So I am looking for the raw tailwind code to insert into a tiddler (I saw it once a while ago)
• On Tailwind.com, the thorough instructions do not discuss the application inside Tiddlywiki, but that is essentially what I am trying to decipher here

[Soren Bjornstad]

Somewhat off-topic, but:

 

BTW, the "period" in front of class names always confuses me, sometimes I need it, and other times no - ?

Class names don't include a period, but you need a period when you're using it in a CSS selector (the start of a CSS rule in a stylesheet that comes before the {) to indicate that it's a class name rather than an HTML tag name. So it's 'class="whatever"' but '.whatever { color: blue; }'. If you said 'whatever { color: blue; }', then you would be trying to style all the 'whatever' tags in the document instead of all tags of any kind that have the 'whatever' class assigned.

You also need the . for the @@ syntax in TiddlyWiki (e.g., '@@.whatever (text) @@') for similar reasons (otherwise you couldn't tell the difference between a style attribute like "color" and a class called "color").

[TW Tones]

And the .classname works elsewhere eg the class "g" in the stylesheet .g { css }

;.g text

:.g text

*.g text

#.g text

Tones