Textual version 0.2.0 came out this week which higlighted a mayor milestone for
the project: CSS for terminal apps. While it's not 100% just like CSS, the goal
of it is to be as familiar as possible to build re-usable stylesheets for the
Terminal User Interfaces (TUIs).
And while CSS is great, there's a reason that we don't use it to build calmcode:
we use tailwind.css instead. We just find that the
class based systen is more intuitive and we also really like how it allows you
to just keep working in a single HTML file.
So what if we could have something like tailwindcss for a Textual?
Enter Tuilwind.css
We couldn't resist, and we started a project to facilitate tailwind-like classes
for TUIs. The project is called tuilwind.css and it can be found on Github.
The project is very much an experiment right now because it's pretty early days
for terminal apps, but we've found it a joy to work with allready.
To use it, you can just download the generated tuilwind.css locally:
And from here you can just refer to it from your Textual app.
from textual.app import App, ComposeResult
from textual.widgets import Static
class PaddingDemo(App):
CSS_PATH = "tuilwind.css"
def compose(self) -> ComposeResult:
"""Called to add widgets to the app."""
yield Static("p-1", classes="p-1 bg-blue-400")
yield Static("p-2", classes="p-2 bg-blue-500")
yield Static("p-3", classes="p-3 bg-blue-600")
yield Static("p-4", classes="p-4 bg-blue-700")
if __name__ == "__main__":
app = PaddingDemo()
app.run()
Here's what this would look like in your terminal:
Examples
If you're curious to learn more, you can check out the gallery on the docs. As you'll
see right away, the project doesn't cover all of tailwind's classes. But we hope the
project covers enough to make it easier for you to get started.
ps. We are working on a textual course and a tailwind course, be tuned for that later!
