What is the idiomatic way to configure Tailwind with NimblePublisher?

Questions / Help
1

Hi folks!

I just generated a new Phoenix 1.7 + NimblePublisher project, and I have been customising the styles by doing something like this on assets/css/app.css

@import "tailwindcss/base";
@import "tailwindcss/components";
@import "tailwindcss/utilities";

@layer base {
    pre {
        margin-top: 2rem;
        margin-bottom: 2rem;
        padding: 1.2rem;
        background-color: #f5f5f5;
        overflow-x: auto;
    }
    code {
        font-size: smaller;
        font-family: monospace;
    }
}

I suspect this may not be the best approach. Please point me at the right direction!

1 Like
2

First, you shouldn’t override the base layer. It’s better to use components layer:

@layer components {
  .prose-custom {
     pre {
       margin-top: 2rem;
       ...
     }
  }
}

And, if you’d like to use a design system, don’t write arbitrary CSS styles, use the utility CSS provided by TailwindCSS:

@layer components {
  .prose-custom {
    pre {
      @apply mt-8; 
      ...
    }
  }
}

Then, use the prose-custom for the container of generated HTML:

<div class="prose-custom">
  <!-- content generated by NimblePublisher -->
</div>

If you like a pre-defined styles, checkout @tailwindcss/typography - Tailwind CSS.

3 Likes
3

Thank you! This is really helpful!

1 Like