tailwindcss_build 0.0.5

Plugins developed based on tailwind css

example/lib/main.dart

import 'package:flutter/material.dart';
import 'package:tailwindcss_build/tailwindcss_build.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        // This is the theme of your application.
        //
        // Try running your application with "flutter run". You'll see the
        // application has a blue toolbar. Then, without quitting the app, try
        // changing the primarySwatch below to Colors.green and then invoke
        // "hot reload" (press "r" in the console where you ran "flutter run",
        // or simply save your changes to "hot reload" in a Flutter IDE).
        // Notice that the counter didn't reset back to zero; the application
        // is not restarted.
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});

  // This widget is the home page of your application. It is stateful, meaning
  // that it has a State object (defined below) that contains fields that affect
  // how it looks.

  // This class is the configuration for the state. It holds the values (in this
  // case the title) provided by the parent (in this case the App widget) and
  // used by the build method of the State. Fields in a Widget subclass are
  // always marked "final".

  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          // Here we take the value from the MyHomePage object that was created by
          // the App.build method, and use it to set our appbar title.
          title: Text(widget.title),
        ),
        body: ListView(
          children: [
            Div(List.generate(
                    8,
                    (index) => Div([])
                        .bg(Colors.yellow)
                        .shadowXl()
                        .roundedLg()
                        .build()))
                .h(1200)
                .m(12)
                .grid()
                .gridCols(2)
                .aspect(2/1)
                .gapX(16)
                .gapY(16)
                .build(),
            Div([
              Span("button")
                  .fontBold()
                  .textBase()
                  .text(Colors.white)
                  .div()
                  .flex()
                  .justifyCenter()
                  .w(100)
                  .px(8)
                  .py(4)
                  .m(8)
                  .shadow2xl()
                  .bg(Colors.blue)
                  .rounded()
                  .build(),
            ]).build(),
            Span("Grid").fontBold().textLg().build(),
            Div([
              Span("Grid Template Columns").fontBold().textLg().build(),
              Div([
                Span("item1")
                    .italic()
                    .div()
                    .bg(Colors.red)
                    .itemsCenter()
                    .justifyCenter()
                    .build(),
                Span("item2")
                    .italic()
                    .div()
                    .bg(Colors.green)
                    .itemsCenter()
                    .justifyCenter()
                    .build(),
                Span("item3")
                    .italic()
                    .div()
                    .bg(Colors.blue)
                    .itemsCenter()
                    .justifyCenter()
                    .build(),
                Span("item4")
                    .italic()
                    .div()
                    .bg(Colors.pink)
                    .itemsCenter()
                    .justifyCenter()
                    .build(),
                Span("item1")
                    .italic()
                    .div()
                    .bg(Colors.red)
                    .itemsCenter()
                    .justifyCenter()
                    .build(),
                Span("item2")
                    .italic()
                    .div()
                    .bg(Colors.green)
                    .itemsCenter()
                    .justifyCenter()
                    .build(),
                Span("item3")
                    .italic()
                    .div()
                    .bg(Colors.blue)
                    .itemsCenter()
                    .justifyCenter()
                    .build(),
              ])
                  .grid()
                  .h(300)
                  .gapX(20)
                  .gapY(10)
                  .gridCols(4)
                  .aspect(3 / 6)
                  .build()
            ]).flex().flexCol().gap(12).build(),
            Span("Typography").fontBold().textLg().build(),
            Div([
              Span("Font Size").fontBold().textLg().build(),
              Span("XS").textXs().build(),
              Span("SM").textSm().build(),
              Span("Base").textBase().build(),
              Span("LG").textLg().build(),
              Span("XL").textXl().build(),
              Span("2XL").text2xl().build(),
              Span("Custom Size").textSize(30).build(),
              Span("Font Example")
                  .fontBold()
                  .fontMedium()
                  .lineClamp2()
                  .leading3()
                  .italic()
                  .build()
            ]).flexCol().mt(40).gap(12).build(),
            Div([
              Span("Font Style").fontBold().textLg().build(),
              Span("Italic").italic().build(),
              Span("NoItalic").noItalic().build(),
            ]).flex().flexCol().gap(12).my(40).build(),
            Span("Flexbox ").fontBold().textLg().build(),
            Div([
              Div([
                Div([
                  Icon(Icons.search),
                  Span("item1").italic().fontBold().text(Colors.white).build()
                ])
                    .boder(color: Colors.blue, width: 2)
                    .from(Colors.red)
                    .via(Colors.green)
                    .to(Colors.blue)
                    .bgGradientToT()
                    .roundedFull()
                    .flexRow()
                    .gap(12)
                    .itemsCenter()
                    .justifyCenter()
                    .h(32)
                    .w(200)
                    .event()
                    .onTap(() => print("123"))
                    .build(),
                Span("item2").build()
              ]).flex().flexRow().gap(12).build(),
              Div([Span("item1").build(), Span("item2").build()])
                  .flex()
                  .flexCol()
                  .gap(12)
                  .build()
            ]).build()
          ],
        ));
  }
}