Forem: Oz Ertas

How to customize Tailwind CSS Typography

Oz Ertas — Fri, 19 Nov 2021 16:09:56 +0000

Tailwind CSS Typography provides a set of prose classes you can use to style your markdown posts. But sometimes the default styles are not enough to hit the mark. That's when Tailwind's customization API swoops in to save the day.

If you don't know what Typography is, you should read How to style markdown with Tailwind CSS to learn more.

Inline code styling that comes default with the plugin is one style that is replaced by many. It inserts back ticks before and after the inline code and makes it bold, instead of the more common approach:

<p> Hello world! </p>

The solution to this is customizing the tailwind.config.js file. This allows you to target specific Tailwind classes and adjust their default behavior.

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      typography: {
        DEFAULT: {
          css: {
            'code': {
              color: "#333",
              // You can also use @apply to inline existing utility classes
              "@apply bg-gray-50 text-gray-700": "",
            },
            'code::before': {
              content: '""'
            },
            'code::after': {
              content: '""'
            }
          }
        }
      },
    },
  },
  plugins: [require("@tailwindcss/typography")],
};

Above example is only modifying the look of the inline code blocks. But the same method applies when altering different selectors.

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      typography: {
        DEFAULT: {
          css: {
            color: '#333',
            a: {
              color: '#3182ce',
              '&:hover': {
                color: '#2c5282',
              },
            },
          },
        },
      }
    },
  },
  plugins: [
    require('@tailwindcss/typography'),
    // ...
  ],
}

You can also add new modifiers by creating a new key under typography.

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      typography: {
        '3xl': {
          css: {
            fontSize: '1.875rem',
            h1: {
              fontSize: '4rem',
            },
            // ...
          },
        },
      },
    }
  },
  plugins: [
    require('@tailwindcss/typography'),
    // ...
  ],
}

If you want to delve into more detail, you can check out the repository.

How to set up free web analytics with Umami

Oz Ertas — Thu, 18 Nov 2021 16:51:50 +0000

If you want to stay clear of Google but don't want to break the bank, Umami makes web analytics simple and free. It is a self-hosted web analytics solution that you can deploy to Heroku.

Umami is privacy-focused and only collects the metrics you care about. You can view the live demo to see it in action.

To get started, set up a free account with Heroku.

Umami provides great documentation on how to complete the manual installation. But there is also a Heroku Button that we can use that requires zero effort.

Go ahead and click the "Button" below, give your app a name and click Deploy app. Heroku will take care of the rest of the set up.

Deploy to Heroku

(Although Umami has their own Button in the documentation, at the time of writing, it is not usable for me. I went for the alternative made by Better-CF above.)

Once the build succeeds, click Open app in your Heroku dashboard to get to your Umami instance.

A default administrator account is already set up as admin with the password umami.

After you log in and change your password, go to Settings, Websites and click on the Add website button.

Once you fill out the form and click Save, click on the Get tracking code button on the Websites page.

Copy the code and insert it into the head section of your website. It looks like the one below:

<script async defer data-website-id="d8402665-41eb-4cda-b520-09dcc62972ce" src="https://your-umami-app.herokuapp.com/umami.js"></script>

Go ahead and give your website a visit to see the data immediately appear in your Umami dashboard.

Congratulations! Your website now uses free and open source web analytics.

(You should note that the Postgres database that stores your data has a limit of 10000 rows for the free tier. Depending on your site traffic, you may need to consider upgrading to a paid tier on Heroku.)

How to use Svelte components in Astro

Oz Ertas — Wed, 17 Nov 2021 16:04:32 +0000

Astro supports Svelte out of the box. All you need is the correct framework renderer and you are good to go.

A renderer is an npm package that handles two things; rendering and rehydrating HTML.

We need to install @astrojs/renderer-svelte plugin to make Svelte components work.

Install @astrojs/renderer-svelte via npm or yarn:

# Using npm
npm install @astrojs/renderer-svelte

# Using yarn
yarn add @astrojs/renderer-svelte

Add it to your astro.config.mjs in the renderer property.

export default {
  // ...

  renderers: [
    // ...
    '@astrojs/renderer-svelte'
  ]
}

Now you can import your Svelte component as usual.

---
import Navigation from '../components/Navigation.svelte'
---

<Navigation />

For more information about renderers, take a look at the documentation.

How to style markdown with Tailwind CSS

Oz Ertas — Tue, 16 Nov 2021 22:51:58 +0000

Tailwind CSS comes with "an opinionated set of base styles" called Preflight. A helpful CSS reset built on top of modern-normalize.

Margins, headings, lists, and many others get stripped from their defaults. Thus, achieving cross-browser consistency and an easier adaptation of your design system.

It all sounds helpful, until you need those defaults to style a markdown post.

In comes @tailwindcss/typography, a plugin with sensible typographic styles. It adds a set of prose classes to style content blocks like the one you are reading.

You can install it via npm or yarn:

# Using npm
npm install @tailwindcss/typography

# Using Yarn
yarn add @tailwindcss/typography

Then add the plugin to your tailwind.config.js file:

// tailwind.config.js
module.exports = {
  theme: {
    // ...
  },
  plugins: [
    require('@tailwindcss/typography'),
    // ...
  ],
}

Finally, you can use the prose class to apply the markdown styling:

<article class="prose lg:prose-xl">
  <h1>Welcome to Mars!</h1>
  <p>
    Although life on Mars is perfect in every single way, you might have some questions.
  </p>
  <p>
    Of course there’s air! Just don’t breathe it. And, with the crazy gravity situation, everyone can dunk!
  </p>
  <!-- ... -->
</article>

More information about the prose class and its modifiers can be found in the repository.