Calmcode - tailwind: production

Tailwind Shrinking

1 2 3 4 5 6 7

Consider the following HTML page with all the attached tailwind classes.

<!doctype html>
<html>
<head>
  <meta charset="UTF-8">
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body>
  <div class="grid grid-cols-2 md:grid-cols-4 gap-4 bg-slate-200 m-4">
    <div class="bg-slate-400 hover:bg-slate-600">01</div>
    <div class="bg-slate-400 hover:bg-slate-600">02</div>
    <div class="bg-slate-400 hover:bg-slate-600">03</div>
    <div class="bg-slate-400 hover:bg-slate-600">04</div>
    <div class="bg-slate-400 hover:bg-slate-600">05</div>
    <div class="bg-slate-400 hover:bg-slate-600">06</div>
  </div>
</body>
</html>

Notice how the header of the HTML file has a script tag that points to the tailwindcss CDN. This is a very easy way to get started with tailwindcss but it's not the most efficient way to use it in production. After all, this contains all of the tailwindcss classes and you're probably not using all of them.

If you want to use tailwindcss in a more production like environment then you probably want to think about shrinking it. You won't need to have all the classes around and you only want your bundle to have the classes that you actually use. For this, you'll need to install the tailwindcss command line tool locally. If you are on a mac you can do this with the following command.

curl -sLO https://github.com/tailwindlabs/tailwindcss/releases/latest/download/tailwindcss-macos-arm64
chmod +x tailwindcss-macos-arm64
mv tailwindcss-macos-arm64 tailwindcss

For other operating systems you can check the tailwindcss releases page. From here you can download the same file for your operating system.

This gives you a local command line utility that you can call via ./tailwindcss. To shrink your bundle down you'll need to do one extra thing though which is that you'll need to tell tailwind where all of your html/js files are that might contain the tailwindcss classes that you are using. This is configurable in a tailwind.config.js file. Here's an example of what that file might look like.

module.exports = {
    content: ["./*.{html,js}"],
    theme: {
      extend: {},
    },
    plugins: [],
}

In this case we are telling tailwind to look for all the html and js files in the current directory. This is a very simple configuration but you can make it more complex if you want to. If you want to shrink your bundle you can now run the following command.

./tailwindcss build -o style.css

This will create a style.css file that contains all the classes that you are using in your html and js files. This is a much smaller file than the full tailwindcss bundle and is much more efficient to use in production. You can choose to shrink the bundle even further by running the following command.

./tailwindcss build -o style.css --minify

This will create a minified version of the style.css file that is even smaller by removing all the whitespace. From here, you can point to the create style from the HTML by replacing the CDN link with a link to the local file. In our case, this would look like this.

<!doctype html>
<html>
<head>
  <meta charset="UTF-8">
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div class="grid grid-cols-2 md:grid-cols-4 gap-4 bg-slate-200 m-4">
    <div class="bg-slate-400 hover:bg-slate-600">01</div>
    <div class="bg-slate-400 hover:bg-slate-600">02</div>
    <div class="bg-slate-400 hover:bg-slate-600">03</div>
    <div class="bg-slate-400 hover:bg-slate-600">04</div>
    <div class="bg-slate-400 hover:bg-slate-600">05</div>
    <div class="bg-slate-400 hover:bg-slate-600">06</div>
  </div>
</body>
</html>