Subscribe

Plain HTML starter with Tailwind CSS

✍️

A non-framework needed Tailwind CSS HTML starter template.

27 Feb, 2021 Β· 4 min read

Ever needed just a plain HTML started, but with the power of Tailwind CSS?

We can, of course, load Tailwind from a CDN, but that kind of goes against the power of Tailwind. It would load every styling element, of which 90% isn't used in our project.

We also couldn't add extensions.

So I decided to look if there was a plain HTML starter. I don't need fancy React, Vue, or whatever framework. Basic HTML will do.

And I couldn't find it at first, so here we go. Let's make our own plain HTML tailwind starter!

TL;DR: You can find the plain HTML Tailwind starter on GitHub

Creating the structure

Let's first start by creating the structure.

mkdir html-tailwind-starter
cd html-tailwind-starter

This will create a folder called html-tailwind-starter and move into it.

In there, we can initialize NPM so we can leverage Tailwind.

npm init -y

Note: The -y flag will say yes to all questions.

Now let's add Tailwind from the npm package.

npm install tailwindcss

Now let's create a styles.css file and add the Tailwind elements.

@tailwind base;
@tailwind components;
@tailwind utilities;

Processing the Tailwind CSS

We need a way to process the Tailwind CSS. Usually, a framework would come in handy for us, but most of them use postCSS. So let's add it ourselves.

npm install postcss-cli autoprefixer

Then we can create a postcss.config.js file which will handle what needs to happen with which CSS file.

module.exports = {
  plugins: [require('tailwindcss'), require('autoprefixer')],
};

Now we can add the actual build command to convert the Tailwind basic to our end CSS file.

Open up your package.json and add a build script.

"build": "postcss styles.css -o src/styles.css"

In your terminal, you can now run the following command. It will convert the input css file to styles.css located in the src folder.

npm run build

Adding the HTML file

Now that we have our Tailwind converted into our src folder, I'm going to add the index.html into the src folder.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>Basic HTML/Tailwind starter</title>
    <meta name="description" content="Basic HTML/Tailwind starter" />
    <meta name="author" content="Daily Dev Tips" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <div class="flex items-center w-screen h-screen bg-red-200 align-center">
      Welcome
    </div>
  </body>
</html>

Technically you can now open up the index.html file in a browser and see the result.

Tailwind HTML Starter

We can, however, also add the live server to make our lives a bit easier.

npm install -g live-server

And then add a custom script in our package.json again.

"dev": "npm run build && live-server src --port=8080"

This will serve the live-server on the src folder.

We can run it with:

npm run dev

And it should run our postcss and start the server on localhost:8080.

Adding a Tailwind config file

One thing I think is a must is the Tailwind config. We can extend certain elements, but more importantly, we can use the purge option.

We can add the file by running the following command.

npx tailwindcss init

Let's add a custom color to it first.

module.exports = {
  purge: [],
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {
      colors: {
        'daily-dev-tips': '#F89283',
      },
    },
  },
  variants: {
    extend: {},
  },
  plugins: [],
};

Now we can use this color in our index.html.

<div
  class="flex items-center justify-center w-screen h-screen bg-daily-dev-tips"
>
  Welcome
</div>

Re-run the npm run dev command.

Custom color in Tailwind

And there we go, a custom color in our Tailwind!

Adding the purge option to the Tailwind config

As mentioned, we would want to leverage the purge option. Let's see the initial file that is created now.

Style.css 4MB quite big

The initial CSS file is 4MB. Wow, and we only used one div so far? Yep, we got the whole Tailwind classes in there!

So how can we fix this?

Open up the tailwind.config.js file and modify the purge rule to look like this.

module.exports = {
  purge: {
    enabled: true,
    content: ['src/*.html'],
  },
  // Other stuff
};

This will enable the purge and only use the classes in the src folder for HTML files.

Now re-running the dev command will result in the following.

Purged Tailwind CSS

11KB is way better than the 4MB. So happy with that win!

Now you can start building your Tailwind project based on just the HTML file in the src directory.

You can also find the whole project on GitHub.

Thank you for reading, and let's connect!

Thank you for reading my blog. Feel free to subscribe to my email newsletter and connect on Facebook or Twitter

Spread the knowledge with fellow developers on Twitter
Tweet this tip
Powered by Webmentions - Learn more

Read next πŸ“–

Creating an animated wave line with Tailwind CSS

10 Mar, 2022 Β· 4 min read

Creating an animated wave line with Tailwind CSS

Tailwind CSS Numeric font variants

9 Mar, 2022 Β· 3 min read

Tailwind CSS Numeric font variants

Join 1828 devs and subscribe to my newsletter