Tailwind CSS Base HTML Example

01-app.less

@tailwind base;
@tailwind components;
@import "base";
@import "custom";
@tailwind utilities;

02-base.less

/***********************/
/****  BASE STYLES  ****/
/***********************/

.base-html {

    * {
        @apply leading-normal;
    }

    // Headings
    h1 {
    @apply my-3 text-4xl font-bold;
    }

    h2 {
    @apply my-4 text-3xl font-semibold;
    }

    h3 {
    @apply my-5 text-2xl font-semibold;
    }

    h4 {
    @apply my-6 text-xl font-semibold;
    }

    h5 {
    @apply my-8 text-lg font-medium;
    }

    h6 {
    @apply my-10 text-base font-medium;
    }

    // Paragraphs
    p {
    @apply my-3 font-hairline;
    }

    // Blockquotes
    blockquote {
    @apply my-4 px-8 border-l-4 border-gray-200;
    }

    // Horizontal Rules
    hr {
    @apply my-6 border-t;
    }

    // Lists
    dl, ol, ul {
    @apply my-4 pl-3 list-inside;
    }

    // Definition Lists
    dl {
        dt {
        @apply font-semibold;
        }

        dd {
        @apply ml-6;
        }
    }

    // Ordered Lists
    ol {
    @apply list-decimal;
    }

    // Unordered Lists
    ul {
    @apply list-disc;
    }

    // Anchors
    a {
    @apply underline;
    }

    // Tables
    table {
    @apply table border-separate border-gray-200 align-middle text-left bg-gray-200 rounded;

        caption {
        @apply p-3;
        }

        thead tr th {
        @apply py-2 px-4;
        }

        tbody tr td {
        @apply py-2 px-4;
        }

        tfoot tr th {
        @apply py-2 px-4;
        }
    }

    // Forms
    input, textarea {
    @apply block px-3 py-2 border rounded text-sm;
    }

    input:focus, textarea:focus {
    @apply outline-none;
    }

    label {
    @apply block mb-2 text-sm font-semibold;
    }

    input[type="submit"], input[type="button"], input[type="reset"] {
    @apply inline-block px-4 py-2 bg-gray-200 font-semibold;
    }

    // Images
    figure {
    @apply inline-block;

        img {
        @apply block w-full;
        }

        figcaption {
        @apply block p-3 text-center text-sm;
        }
    }

}

03-original.html

<!-- In this example, all of the text within the base-html container is default (black) -->

<div class="base-html">
  <h1>Title</h1>
  <p>Body goes here...</p>
</div>

04-override-to-white.html

<!-- If I wanted all text to be white and add the text-white class, the text remains white. The only way to get the text within to be white is to apply text-white to each individual element which becomes a pain -->

<div class="base-html text-white">
  <h1>Title</h1>
  <p>Body goes here...</p>
</div>

05-other-notes.txt

I love using utility classes for most things, but .base-html comes in handy for a couple of things...

    1. WYSIWYG CMS Fields
    2. Content that should really be styled like default HTML
    
I am aware of custom components which should be used for things like cards, and buttons, but it doesn't seem like the best solution for raw native HTML elements.

I would like to know, what do your tailwind build scripts look like in package.json, with the addition of lessc?

I agree with your use-case for WYSIWYG CMS Fields.

For example, using the Classic Editor in WordPress creates generic "content" for a post or page. In the page.twig template, the content gets wrapped like this:

<div class="article-body">
  {{ post.content }}
</div>

So it would be nice to nest several @apply rules inside the article-body class.

However, my build setup is for CSS, not Less.