• 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 app Arduino ASP.Net automated testing Azure Big Data C# C++ Cloud continuous integration Elm Embedded 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 WPF Xamarin Xamarin.Android Xamarin.Forms Xamarin.iOS

Archive

Current Posts

  • Virtual pty/tty uart listener: Pitfalls on linux socat
  • Akzente setzen mit der Android Splash Screen API unter .NET MAUI
  • Do You have Your Personal Space?
  • Automated provisioning with ARM Templates
  • Asynchrone Beobachtungen und Versprechungen in Angular

Last Comments

  • Hans Reinsch bei Der Safety-Plan: Die wichtigsten Antworten mit Checkliste
  • George H. Barbehenn bei Modeling Optocouplers with Spice
  • 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)

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