Notoriously Problematic Merge


    1.1.0 • Public • Published


    This package is a tailwindcss implementation of the Masonite Design Language. Tailwind is a utility-first CSS framework that can be used to build for the web without writing CSS. Combine it with another MDL package and avoid coming up with names for for arbitrary markup!


    All of the design tokens, such as color and spacing are available through CSS classes, along with many classes to represent the box-model, such as flex and mx-auto for display: flex; margin-left: auto; margin-right: auto;. However, there are no base styles. You will most likely want to combine it with existing base styles. Everything in Tailwind is zero'd out.

    text-limerick and bg-limerick will produce the Masonite green for the color and background property respectively. All Masonite colors are simply prefixed by text- or bg-. This pattern applies to border colors and whereever else applicable. Check out the Tailwind docs for more.

    // Example in plain HTML (used with the global stylesheet)
    <header class="text-center py-xl bg-gray">
        <span class="inline-block text-lg text-white bg-limerick py-xs px-sm mb-sm uppercase">
        <span class="block text-night">@masonite/tailwindcss</span>
      <h2 class="flex items-center justify-center">
        <span class="text-3xl mr-xs">🚪</span>
        <span>No CSS behind these doors</span>


    npm i @masonite/tailwindcss

    Tailwind CSS

    Node, webpack, etc

    For classic Tailwind action, import the one of the CSS files (unminified should be used for Node/webpack). tailwind.css ideally comes before your other CSS, but this isn't prescriptive.

    //Import one of these near the root of your application
    import '@masonite/tailwindcss/tailwind.css'
    import '@masonite/tailwindcss/tailwind.min.css' // Pre-minified version
    // Combine with whatever you currently use to get MDL styles/components
    import '@masonite/external-ui-react/dist/styles/global.scss' 

    Accessing MDL Design Tokens in JavaScript

    If you wish to reference colors, space increments, and other design tokens, you can import the config. Read more on Referencing in JavaScript on the Tailwindcss website.

    import { resolvedConifg } from "@masonite/tailwindcss";

    Using the Config

    You can get the unresolved tailwindConfig and do the build within your project.

    // tailwind.config.js (in your project)
    import { tailwindConfig } from "@masonite/tailwindcss";
    export default {
      // Change options


    Tailwind is best used with a strong component-driven system or one-offs. You can also use it just for the flexbox, padding and margin helpers.

    CSS Conflicts

    Tailwind by nature is all CSS utility classes, so in an environment like WordPress, or anywhere with CSS that is out of your control, there is a chance you may run into conflicts.

    Prefix Classes

    Adding a prefix to your classes can prevent collisions with simple and short generic class names, like .container.

    // tailwind.config.js
    module.exports = {
      prefix: "mdl-",

    Using Important

    This isn't very chill, but it is available as an option, which may be necessary in an environment with very competitive CSS specificity.

    // tailwind.config.js
    module.exports = {
      important: true,

    Don't Concatenate Strings to Form Tailwind Classes

    When you want to change CSS properties, for example, toggling between styles or changing CSS classes based on a prop, avoid concatenating strings to form Tailwind classes, such as 'px' + size to make 'px-4'. This prevents optimization that can be done to remove unused classes.

    ...Lots More

    This list is by no means definitive. While Tailwind isn't always the best solution, there are various libraries, patterns, and strategies to overcome them.




    npm i @masonite/tailwindcss

    DownloadsWeekly Downloads






    Unpacked Size

    3.47 MB

    Total Files


    Last publish


    • jashleymasonite
    • willyrk1
    • lukepotter
    • mmeder
    • rhedman