TailwindCSS is growing in popularity as a utility-first CSS framework helping to make developing with CSS a fun and productive experience for developers. Utilising Tailwind eliminates fighting against the framework to try and customize your site to your requirements.
In a previous, Gridsome - Explore plugins making life easy we made use of a Gridsome plugin to ease the implementation of Tailwindcss within out projecty. In this post, we are going to explore how to utilize TailwindCss to implement some custom styles and setting to improve the content and layout of the website we started developing in Gridsome - An introduction to Vue static website generator
What is Tailwind Css
Tailwind is a CSS framework that provides pre-defined classes to help you design your website easily without thinking about styles, conventions or cross-browser support. It's a utility first framework because it provides precisely that: CSS utilities for you to add to your HTML elements.
Tailwind provides tools and utilities to build unique looking websites by composing the necessary components together. There are opportunities still to create a pre-defined components. However, instead of providing these out of the box Tailwind provides the flexibility to decide which defined components should be and how many you require.
using a utility-based CSS library you select the parts of the library that you import project. For instance, when adding my-8 shadow-lg rounded-sm to a div tag means that your project now depends on those classes. However, what about my-0 and my-2 and all of the other varieties that come with Tailwind?
Potentially, this could resulting you needing to import all unused classes that tailwind helpfully provides into your production environment. Obviously this is sub optimal due to the fact that both the client and server are going to need to download and ship all those additional bytes
Why use PurgeCSS with Tailwind?
Purgecss helps to aggressively reduce the bloat by scanning files for instances of class names and removing unused classes not used in any of the templates. PurgeCSS is a tool to remove unused CSS. It can be part of your development workflow.
The speed of a static JAM stack demands and efficient CSS stack to go with it and Tailwind is the answer. It is also therefore essential to use a library. PurgeCSS analyzes your content and your css files. Then it matches the selectors used in your files with the one in your content files. It removes unused selectors from your css, resulting in smaller css files.
If you have been following along in this tutorial series you would have already added Tailwind CSS to our Gridsome project in the Gridsome – Explore plugins to make life easy , PurgeCSS is enabled by default with the gridsome-plugin-tailwindcss
In order to make use of the PurgeCSS functionality Tailwind requires a configuration file that will be used to generate the necessary classes. We need to initialize one and by default it will create a tailwind.config.js file.
To quickly create the configuration file we can simply use following npx command:
This will create a new tailwind.config.js file in the root of project directory, which is essentially a JavaScript Module where you can define any tailwind customizations.
Eloquent JavaScript, 3rd Edition
A Modern Introduction to Programming
Marijn Haverbeke
Reflects the current state of JavaScript
Buy Now Read ReviewTailwind Configuration
Once we have created our tailwind.config.js we are now able to include the customization we want to inlcude. In our case we want to change include changes to the default green and gray provided by Tailwind, include some default fonts we want to cater for and set the screen sizes.
Tailwind provides default theme with a very generous set of values to get started, but don't be afraid to change it or extend; you're encouraged to customize it as much as you need to to fit the goals of your design
The theme section is where we define our color palette, font stacks, type scale, border sizes, breakpoints — anything related to the visual design of your site. The Tailwind documentation has a detailed Theme Configuration explanation of what can be achieved.
This will set the basics for our site. However, we still want to add some additional styles to really format our content. Tailwind doesn't stop us from doing this.
To suit our purposes, we are going to base our content styles on the github-markdown-css, but we are going to customize this a little.
In order to quickly get this working we are going to create an additional stylesheet in our assets/css folder and basically call it markdown.css then in our Post.vue template we will simply import our stylesheet and apply the style to our content body.
Update the CSS we created in Gridsome – Explore plugins to make life easy to import our new markdown.css
In our Post.vue we'll implement our custom markdown-body style
Configure PurgeCSS
We have defined our Tailwind Configuration and even defined some additional styles. At the start of this we introduced PurgeCss, a tool to remove unused CSS that should be part of your development workflow.
Using a CSS framework like TailwindCSS you will undoubtedly only use a small set of the framework, and a lot of unused CSS styles will usually be included.
I mentioned previously that although we're using the tailwindcss gridsome plugin and PurgeCSS is enabled by default, we still really need to configure the plugin, if we want to ensure any additional aspects need to be covered. Luckily its quite easy to add any additional configuration to PurgeCSS because by default PurgeCSS looks for a purgecss.config.js in the root directory of your project.
So all we need to do is add this file and just like the Tailwind configuration file it is a JavaScript Module that enables us to set additional configuration properties.
A detailed discussion of these configuration properties can be found PurgeCSS Configuration
Summary
We covered the basics of customizing our Tailwind Configuration and how we can integrate additional Stylesheet tostyle the content of our blog posts.
- What is this Directory.Packages.props file all about? - January 25, 2024
- How to add Tailwind CSS to Blazor website - November 20, 2023
- How to deploy a Blazor site to Netlify - November 17, 2023