• Noser.com
facebook
linkedin
twitter
youtube
  • NOSERmobile
    • Android
    • HTML 5
    • Hybrid Apps
    • iOS
    • Windows Phone
  • NOSERembedded
    • Medizintechnik
  • NOSERprojektmanagement
  • NOSERtesting
  • NOSERlifecycle
    • .NET Allgemein
    • Application Lifecylce Management
    • Apps
    • Architektur
    • ASP.NET
    • Azure
    • Cleancode
    • Cloud
    • Silverlight
    • Visual Studio / Team Foundation Server
    • Windows 8
    • Windows Presentation Foundation
  • NOSERinnovation
    • Big Data
    • Cloud
    • IoT
    • Operations Research
    • Augmented Reality
    • RFID, NFC, Bluetooth LE

TailwindCSS, utility first! CSS einmal anders

10. November 2020
Simon Heller
0
CSS, Html, Tailwind, Utility-first framework

Dieser Beitrag soll eine kurze Einführung in TailwindCSS geben. TailwindCSS (nachfolgend Tailwind genannt) ist ein utility-first CSS Framework. Das bedeutet, dass es dem Benutzer Utility-Klassen zur Verfügung stellt, mit denen er eigene Designs erstellt. Eine Utility-Klasse ist selbst-beschreibend und kümmert sich immer um eine spezifische Sache (z.B. welche Farbe). Sie kann beliebig oft verwendet werden und wird direkt im HTML eingesetzt. 

Hier ein kurzes Beispiel: 

1
2
3
<button class="bg-orange-500 hover:bg-orange-700 text-white font-bold py-2 px-4 rounded">
  Noser
</button>

Generierte Buttons aus dem HTML

 

Dieser Code generiert einen Button mit orangem Hintergrund («bg» für Background), der durch die Zahl hinten am «bg-orange» heller bzw. dunkler wird. «py» steht für Padding y-Achse, also für das Padding oben und unten, und «px» für die x-Achse. Der Rest ist selbsterklärend. Dadurch wird nur über das Lesen der CSS Klassen schnell klar, wie dieser Button aussieht. 

READ MORE

Tag Cloud

.NET android AngularJs app Arduino ASP.Net automated testing Azure C# C++ Cloud continuous integration Elm Embedded gRPC HTML5 Internet of Things IoT Java Javascript linux M2M Matlab OWASP Projektmanagement protobuf Raspberry Pi Reactive Programming REST Scrum Security Softwarequalität SPA Testen testing Testmanagement Teststrategie Visual Studio WebAPI windows windows phone 8 WPF Xamarin Xamarin.Android Xamarin.Forms

Archive

Current Posts

  • Das Büro im Kopf – Arbeiten im VR Home Office
  • Step into the world of Bots with Telegram
  • D3.js: Chord-Diagramm Teil 2 – Benutzerdefinierte Sortierung und Kurvenformen
  • Azure Übersicht Teil 3: Cosmos DB
  • Ubuntu Core oder Azure Sphere? – Plattformen für das IoT

Last Comments

  • Noser Blog D3.js: Chord-Diagramm Teil 2 - Benutzerdefinierte Sortierung und Kurvenformen - Noser Blog bei D3.js: Chord-Diagramm Teil 1 – Von den Daten zum Diagramm
  • Noser Blog Azure Übersicht Teil 2: SQL Datenspeicher - Noser Blog bei Azure Übersicht Teil 3: Cosmos DB
  • Noser Blog Azure Übersicht Teil 3: Cosmos DB - Noser Blog bei Azure Übersicht Teil 2: SQL Datenspeicher
  • carmine bei Solid Prinzip
  • Helmut Max Kleiner bei In 6 Schritten zur sicheren Software

Popular Posts

Xamarin.Android Code Obfuscation

6 Comments

ManuScripts: Wenn jemand eine Reise tut... Funktionale Programmierung mit Elm - Teil 1 - Aufbruch

5 Comments

ManuScripts: Wenn jemand eine Reise tut... Funktionale Programmierung mit Elm - Teil 2 - Kein Picknick

4 Comments

Contact us

  1. Name *
    * Please enter your name
  2. Email *
    * Please enter a valid email address
  3. Message *
    * Please enter message
© 2013 NOSER ENGINEERING AG. All rights reserved. Datenschutz | Cookie-Richtlinie