Understand Tailwind

Tailwind offers highly flexible layouting and styling with a very small footprint and you don't have to write CSS. This is achieved by providing a hugh amount of sematic css classes that can be used throught a project.

To get a small footprint over the wire it cleans all classes during build time by searching html and other sourcecode. Only found classes will be included in the final build, reducing the code to a few tens of KB or even less.

Understand the markdown plugin

The markdown plugin for Laravel does not support tailwind out of the box. To make them work we have to do two things.

• the markdown plugin needs to know where to use which css class to style our site

• the frontend build process needs to know the css classes in use so it can strip unused ones

If we can do both of the above we get a javascript free website with modern styling and very small footprint.

Style our site with tailwind and markdown

Markdown consists of different parts. E.g. a part to make code monospaced. The underlying markdown plugin allowes us to register custom renderer for different markdown parts.

So I added a new Service Provider to Laravel and added the follwing code to its boot method.

		app('markdown')
            ->getEnvironment()
            ->addBlockRenderer(Heading::class, new HeadlineRenderer);

        app('markdown')
            ->getEnvironment()
            ->addBlockRenderer(Paragraph::class, new ParagraphRenderer);

        app('markdown')
            ->getEnvironment()
            ->addBlockRenderer(FencedCode::class, new FencedCodeRenderer);

The renderers used here are my own which basicly do the same as the original provided by the plugin, but with the tailwind classes.

the underlying mardown render package https://github.com/thephpleague/commonmark is preparing a version 2.0 at the time of writing in this article i used v1.5 which comes with the laravel markdown package

Inform the build process about our used css classes

To achive a nice gruvey look, i configured tailwind with the colors from gruvbox and added all files in app/Markdown to the purge array. This is where I stored my rendereres.

Example tailwind.config.js

  purge: [
    './resources/**/*.blade.php',
    './resources/**/*.js',
    './app/Markdown/**/*.php', // this is new
    './resources/**/*.vue'
  ],
  theme: {
    colors: {
        white: '#f4f4f4',
        red: {
            DEFAULT: '#cc241d',
            light: '#fb4934',
        },
        green: {
            DEFAULT: '#98971a',
            light: '#b8bb26',
        },
        yellow: {
            DEFAULT: '#d79921',
            light: '#fabd2f',
        },
        blue: {
            DEFAULT: '#458588',
            light: '#83a598',
        },
        purple: {
            DEFAULT: '#b16286',
            light: '#d3869b',
        },
        aqua: {
            DEFAULT: '#689d6a',
            light: '#8ec07c',
        },
        gray: {
            DEFAULT: '#a89984',
            light: '#928374',
        },
        orange: {
            DEFAULT: '#d65d0e',
            light: '#fe8019',
        },
        bg: '#282828',
        bg0_h: '#1d2021',
        bg0_s: '#32302f',
        bg0: '#504945',
        bg1: '#3c3836',
        bg2: '#584945',
        bg3: '#665c54',
        bg4: '#7c6f64',
        fg: '#ebdbb2',
        fg0: '#fbf1c7',
        fg1: '#ebdbb2',
        fg2: '#d5c4a1',
        fg3: '#bdae93',
        fg4: '#a89984',
    },
    extend: {},
  },

This is all that is needed. At the time of writing this puts a little less than 2KB over the wire for beastcoding.de.