• 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: 

<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 ANgular AngularJs Arduino ASP.Net automated testing Azure Big Data C# C++ Cloud continuous integration Elm Embedded Führung gRPC Internet of Things IoT Java Javascript M2M OWASP Projektmanagement protobuf Python 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

  • Eine Woche mit Micronaut – ein Erfahrungsbericht
  • Lasttests mit NBomber
  • Kreative Interaktion mit Xamarin.Forms Touch-Actions
  • Angular vs. React: Ein pragmatischer Vergleich
  • Eine Alternative zu Azure Time Series Insights, bitte?

Last Comments

  • Noser Blog Touch-Actions in Xamarin.Forms - Noser Blog bei Mach mehr aus Animationen in Xamarin.Forms mit SkiaSharp
  • Noser Blog Focus on the Secure Storage service of Trusted Firmware (TFM) - Noser Blog bei First run of the Trusted Firmware (TFM) application
  • Noser Blog First run of the Trusted Firmware (TFM) application - Noser Blog bei Focus on the Secure Storage service of Trusted Firmware (TFM)
  • Noser Blog Focus on the Secure Storage service of Trusted Firmware (TFM) - Noser Blog bei Security management with Trusted Firmware
  • Noser Blog ZeroMQ / NetMQ mit Protocobuf - Noser Blog bei Tutorial: Protocol Buffers in ASP.NET Core

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