DEV Community: Samuel Robertson

TailwindCSS in CodeSandbox: A Detailed Guide

Samuel Robertson — Tue, 11 Aug 2020 20:02:50 +0000

Introduction

CodeSandbox is an awesome web-based editor and playground for developers. However, there is not currently a template for TailwindCSS, and no clear way to run Tailwind outside of using a link to the CDN. The CDN approach works, but robs you of a lot of customization, which Tailwind details here. This guide will show you how to get up and running with TailwindCSS in CodeSandbox with a build process included, similar to my previous blog.

Step 1 - CodeSandbox Node Template Setup

To start on this journey, head on over to CodeSandbox, and click "Create Sandbox" in the top right. Then, in the popup, search for or select Node HTTP Server:

Creating a sandbox based off the Node HTTP Server template is necessary for having access to the Terminal, which is present in CodeSandbox's Container Environments. This will spawn a Node project with a default package.json script that will watch index.js and refresh when it sees changes. Having access to the Terminal is necessary for building and processing our CSS through PostCSS, using Tailwind's Purge capabilities, and for doing any extension or customization of Tailwind (as this requires a Tailwind config file). At this point, you should an environment similar (or hopefully identical) to this:

Note: You will have to sign in with your GitHub account in order to fork/make changes to the Node HTTP Server template! If you have not signed in at this point, please do so before proceeding with this guide.

Good job! You've now got your own Node instance running in CodeSandbox, and you're well on your way to getting to experiment with Tailwind.

Step 2 - Serving the App via Express

Using the built-in http library is great, but we want to quickly and easily serve a static HTML file so that we can focus on creating pages using Tailwind. For this purpose, we'll be using Express to serve an index.html file. This section of the guide is based on scotch.io's article "Use Express to Deliver HTML Files".

To get started, create an index.html file in the src folder of your Node project. Then, insert this HTML into that file:



<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
  </head>
  <body>
    <div>Hello from the HTML!</div>
  </body>
</html>

Note: You can also use the Emmet Abbreviation ! or html:5 to create this snippet, and then add the <div> section!

Now, we need to install a few dependencies. CodeSandbox makes this easy, and you can add new dependencies by clicking the Add dependency button in the primary project sidebar. You'll be greeted with this popup:

In the search box, type express and click the top result for it (the one with 54.2M+ downloads). After that, bring up the dependency popup again, type path, and add the top result for it (3M+ downloads). In the Dependencies section in the sidebar, you should now see both express and path. They will also be present in your package.json file, since CodeSandbox automatically goes through the full install process for new dependencies.

We're now ready to actually serve the app via express. Head on over to your index.js file and replace the contents of the file with the following JS:



const express = require("express");
const path = require("path");
const app = express();

app.get("/", (req, res) => {
  res.sendFile(path.join(__dirname + "/index.html"));
});

app.listen(8080);

For anyone not familiar with what's going on in the above code, I'll do a quick rundown. First, we're importing the dependencies that we just installed and creating a new instance of express that we can access through app. Then, we're telling app to listen for GET requests on the / path of our HTTP server (which, in this case, is our only path). When a request is made on this path, we're using sendFile to transfer the file at the given path, which we create using the path dependency and by joining __dirname with the location of our index.html that we created in the previous step.

Note: __dirname is a core feature of Node.js and returns the absolute path of the file that is currently executing!

You may notice that the output in the Browser on the right doesn't change when you save index.js. To see the proper output of our modified JS file, just refresh the built-in Browser! You should then see a (mostly) blank page with Hello from the HTML! proudly indicating that you have properly directed Node to serve your HTML file.

We're getting there. The next few steps are pretty easy, so sit back, relax, and read on...

Step 3 - Using `live-server` to Automatically Reload Our HTML

For this step, open up the trusty Add dependency popup again, type in live-server, and select the top result (383K+ downloads). As before, your new dependency will be visible under Dependencies and in package.json. Now, open up your package.json if you haven't already, and find the scripts block. Under the current start script, add a new line and insert our new watch script, so that your scripts block now looks like so:



"scripts": {
    "start": "nodemon src/index.js",
    "watch": "live-server src/ --no-css-inject"
 }

What we're doing here is telling live-server to serve the files in our src folder, as well as watch for changes in those files. --no-css-inject tells it to reload the page when CSS changes, instead of trying to dynamically inject the CSS (this is important later).

To run this script, we'll need to open up a new Terminal instance. Do so by clicking the + in the sandbox's Terminal section:

Note: We have to open a new Terminal instance because CodeSandbox keeps the primary instance (the one that is running when you load the sandbox) in a read-only state, so we can't run commands in there.

Once you've done that, simply type yarn watch and the script we just added will run. You should get output similar to the following:

As well as a toast that indicates a new server port has opened, with the option to open it in a new Browser pane. Click that, and you'll once again see your HTML! To verify that our hot-reloading functionality is working, make some changes to the text of your HTML and save. You should see live-server catch the changes and reload your HTML. If not, take a step back and make sure that you have the dependency installed and the script set up properly.

Pretty simple, right? As promised, we have another easy step next...

Note: Whenever this guide says to make a new Terminal instance, cancel (with cmd/ctrl+c) or close your old one before running the new commands!

Step 4 - Installing TailwindCSS and Co. (PostCSS and autoprefixer)

If you've read my blog on installing Tailwind, this step will be very familiar to you. I'll hustle through this process in this guide with some light explanation, so head on over to that guide if you want more in-depth explanation!

From the Add dependency popup, add tailwindcss, postcss-cli, and autoprefixer, and create the following configuration file named postcss.config.js in the root directory of your project:



//postcss.config.js
module.exports = {
  plugins: [require("tailwindcss"), require("autoprefixer")]
};

Then, in a new Terminal instance (make sure you've stopped or exited your other one!), run npx tailwindcss init. If this works, you'll see a new file called tailwind.config.js in your root directory. However, if this command didn't work for you, simply create the file manually and paste the following code:



module.exports = {
  purge: [],
  theme: {
    extend: {},
  },
  variants: {},
  plugins: [],
}

You're now set up with some default configurations for postcss and tailwindcss. To finish up with the basic Tailwind installation, we need to create a CSS file. In your src directory, create a new file named index.css and place the default Tailwind directives in there:



@tailwind base;

@tailwind components;

@tailwind utilities;

With this, you've fully installed Tailwind! You can't quite write any TailwindCSS yet though, so let's get to the next step...

Step 5 - Tailwind Purge Configuration

To properly understand this step, we first need to understand the problem (and one of the biggest challenges revolving around running TailwindCSS in CodeSandbox). Come along with me on an adventure of epic (file size) proportions!

In your package.json scripts block, insert the following script:



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

Open up another Terminal instance (again, being sure your other instance is not running), and run yarn build:css. Assuming you have your config files from the previous step set up properly, you'll be greeted with this shocking message:

Essentially, we have attempted to create a file so big that it exceeds CodeSandbox's file limits, and we have therefore been blocked from creating it. Unfortunately for us, this build step is absolutely necessary for getting Tailwind running properly, and we're now dead in the water. While this may seem strange, Tailwind's development build is large by design. If you scroll down that page, however, you'll notice that there is is a purge option mentioned that should be run when deploying to production. This option employs tree shaking to prune unused code in Tailwind's output CSS. While normally only used in production, we're going to take advantage of purge in order to optimize the output of our build:css script and get past CodeSandbox's file size limit.

Open your tailwind.config.js file that we created earlier. You'll notice that there is already a purge option present. Replace this line so that the contents of tailwind.config.js now looks like so:



module.exports = {
  purge: {
    enabled: true,
    content: ["./src/**/*.html"]
  },
  theme: {
    extend: {},
  },
  variants: {},
  plugins: [],
}

See the difference in purge? What we're doing here is explicitly enabling purge, regardless of the environment. Then, we're directing it to the files that it needs to purge, which is any HTML file under our src folder.

Now, for the moment of truth. Go back to your Terminal, and run yarn build:css. This time, there should be no toast notifying you of file size issues. To verify that our script worked, look for a new build folder under src. Inside this folder should be a file named index.css.

Congrats! You've successfully worked around CodeSandbox's file size limit, and have processed TailwindCSS using PostCSS. We have just one more (!) step before we can fully incorporate Tailwind into our app!

Step 6 - `watch` Script Modification and Final Additions to `index.html`

This is really two steps in one, but I hope you'll cut me some slack on that.

For the final time in this guide, head back over to your package.json file and modify your watch script to be the following:



"watch": "live-server src/ --no-css-inject & nodemon --watch 'src/**/*.html' -e html --exec 'yarn build:css'",

Whoa! We added a lot here. Let's break this down a little.

First, the & symbol (since we already know what live-server does. We have two separate commands in this line (before and after this symbol) that we want to run in parallel. This is exactly what & does: it tells yarn to run both the live-server and nodemon commands at the same time.

Second, the nodemon command. nodemon is a utility that watches files and will automatically restart a Node server when those files change. However, in our implementation, we're changing that quite a bit. By default, nodemon only watches for a few file types. So, we're first telling nodemon to watch all HTML files under our src directory. Then, we're modifying the file extensions it looks for with the -e command, where we tell it to watch for files with the html file extension. Finally, we're telling it to execute our yarn build:css with the --exec flag. In plain English, here's the entire command:

nodemon, please watch for all changes to HTML files in my src directory with a .html file extension and rebuild my CSS when those files change

Simpler than it seems at first, right?

I know you're as anxious as I am to get this done and see the fruits of our labor, so head over to your index.html file. Add the following <link> element in between the <head> tags:



<link rel="stylesheet" href="/build/index.css" />

Then, in the <div> we created a long time ago, add a new class attribute:

class="bg-teal-400"

Your HTML should now look like this:



<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <link rel="stylesheet" href="/build/index.css" />
    <title>Document</title>
  </head>
  <body>
    <div class="bg-teal-400">Hello from the HTML!</div>
  </body>
</html>

We're now at the finish line, so let's cross it together. Open your Terminal, and type yarn watch. You'll see output similar to the following, and be prompted to open a new Browser pane (just like before):

If everything we've gone through worked properly, you should now see a beautiful teal background on our div!

Note: You will, typically, see the Browser reload a couple times when you change your TailwindCSS. This is because live-server sees a change in the HTML when we change the CSS and reloads, then reloads again when our index.css file is re-generated. Fear not! This is normal and expected with this configuration.

We have now successfully implemented TailwindCSS in our CodeSandbox project! Though this process may seem a little daunting, it's actually pretty quick and simple when you get the hang of it and understand what's going on. If you want to see the completed template and fork it for yourself, take a look at the completed guide project here:

TailwindCSS Template

As always, to continue your adventure with Tailwind, check out their offical documentation!

Tailwind Tidbits #1: Neumorphic Profile Card

Samuel Robertson — Thu, 06 Aug 2020 16:45:22 +0000

Introduction

In this series, I'm going to pick designs from all around the web and show you how to make them with TailwindCSS. For the most part, I'll be finding these designs from sites like dribble and Behance, but I'd love to do suggestions from comments as well!

For part 1, we'll be building a standard profile card with a neumorphic style. This is a style that is near and dear to my heart because I've always found it fascinating, and my own personal site is built in this style. I have also built the exact profile card we'll be building today in SCSS (and it even has a light/dark theme toggle built in), which you can find in this CodePen.

This tidbit will assume that you have gone through the process of getting TailwindCSS up and running on your machine. If you haven't, check out my guide: TailwindCSS: The Very Basics (Installation + IntelliSense).

With all Tailwind Tidbit guides, we'll be starting from the final result of that guide. If you haven't gone through the guide but want to go through this Tidbit, simply clone the repo, run yarn install then yarn build, and you'll be ready to go!

Step 1 - Adding Custom Colors

While Tailwind has a great default color palette, they just don't quite have the shade we're looking for. Thankfully, they offer a ton of customization, so we can add just the shade we need.

Open up your tailwind.config.js file. Inside extends, create a colors object. Then, inside the colors object, add our custom background color, like so:

//tailwind.config.js
...
theme: {
    extend: {
      colors: {
        "light-theme-gray": "#bfbfbf",
      }
    }
 },
...

Note: Whenever we edit tailwind.config.js, you'll need to re-run yarn build and (likely) refresh your browser. Otherwise, our customizations will not take effect.

This will allow us to use this color in our TailwindCSS. To see this in action, head over to your index.html file, and replace the current contents of the class attribute of the div there with bg-light-theme-gray h-screen w-screen. Your HTML should then look like this:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="/build/index.css">
    <title>Document</title>
</head>
<body>
    <div class="bg-light-theme-gray h-screen w-screen">
        Hello from the HTML!
    </div>
</body>
</html>

What we're doing here is telling TailwindCSS to give our div our custom background color (light-theme-gray) and make the height and width of our div fit the entire viewport (h-screen and w-screen). You should now see the text with a gray background:

Great! This is the background color we'll be using throughout this Tidbit, so this is good progress.

Step 2 - More and More Customization

Now, let's add the rest of our customization. We'll be adding custom properties for borderRadius, boxShadow, height, and width, so declare those as follows:

//tailwind.config.js
...
theme: {
   extend: {
      colors: {
        ... 
     },
     borderRadius: {},
     boxShadow: {},
     height: {}, 
     width: {}   
   }
}
....

And then add the following properties:

//tailwind.config.js
...
borderRadius: {
    card: "10px"
},
boxShadow: {
    "light-card":
        "12px 12px 16px 0 rgba(255, 255, 255, 0.3), -8px -8px 12px 0 rgba(0, 0, 0, .25)",
    "light-button":
        "6px 6px 8px 0 rgba(255, 255, 255, 0.3), -4px -4px 6px 0 rgba(0, 0, 0, .25)"
},
height: {
    card: "300px",
    button: "40px"
},
width: {
    card: "250px",
    button: "100px"
}
...

Also, add the rest of the colors we need:

//tailwind.config.js
...
colors: {
    "light-theme-gray": "#bfbfbf",
    "light-button-gray": "#bfbfbf",
    "light-font": "#474747"
},
...

Note: The box-shadows used here are from the CodePen that I linked in the introduction. They're not special in any specific way, they just work well for the neumorphic look. Mess around with them a bit and see how it looks!

At this point, this should be your full tailwind.config.js:

//tailwind.config.js
module.exports = {
  purge:[],
  theme: {
    extend: {
      colors: {
        "light-theme-gray": "#bfbfbf",
        "light-button-gray": "#bfbfbf",
        "light-font": "#474747"
      },
      borderRadius: {
        card: "10px"
      },
      boxShadow: {
        "light-card":
          "12px 12px 16px 0 rgba(255, 255, 255, 0.3), -8px -8px 12px 0 rgba(0, 0, 0, .25)",
        "light-button":
          "6px 6px 8px 0 rgba(255, 255, 255, 0.3), -4px -4px 6px 0 rgba(0, 0, 0, .25)"
      },
      height: {
        card: "300px",
        button: "40px"
      },
      width: {
        card: "250px",
        button: "100px"
      }
    }
  },
  variants: {},
  plugins: []
};

Note: Don't forget to run yarn build after we edit this file!

Step 3 - Adding the HTML

Now, in this section, I'm going to throw a lot of HTML and a lot of Tailwind at you very quickly. Most of it will be pretty standard, and can be quickly found in the documentation. Instead of walking through every step of the HTML, I'm going to show you the (almost) finished file, and highlight the specific Tailwind that I think is important for learning here.

So, without further delay, here is the (almost) finished HTML:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <link rel="stylesheet" href="/build/index.css" />
    <title>Document</title>
  </head>
  <body>
    <div
      class="bg-light-theme-gray h-screen w-screen flex items-center justify-center"
    >
      <div class="h-card w-card shadow-light-card rounded-card">
        <div class="flex flex-col items-center">
          <img
            src="http://placedog.net/75/75"
            class="rounded-full m-x-auto mt-10 shadow-light-button"
            id="profilePhoto"
          />

          <span class="mt-6 font-bold text-lg text-light-font">Doggo</span>
          <span class="font-light text-sm text-light-font"
            >Frontend Engineer</span
          >

          <div class="mt-6 inline-block items-center">
            <button
              class="rounded-full h-button w-button m-2 shadow-light-button text-light-font font-extrabold text-sm"
            >
              Message
            </button>
            <button
              class="rounded-full h-button w-button m-2 shadow-light-button text-light-font font-extrabold text-sm"
            >
              Follow
            </button>
          </div>
        </div>
      </div>
    </div>
  </body>
</html>

Once you save, you should now see this in your browser:

Before we make our final additions, let's highlight some key elements. First, note the places where our custom properties are used:

line 14: h-card w-card rounded-card
line 18: shadow-light-button
lines 22/23: text-light-font
lines 29/34: h-button w-button shadow-light-button text-light-font

Adding custom properties was quick and easy, and gave us descriptive classes for our card.

Other than the custom classes, some of my favorite Tailwind classes that we used here are m-x-auto, rounded-full, and flex flex-row.

m-x-auto: Applies auto margin to the x-axis of the element (so the left and right sides)

rounded-full: Gives us the fully-rounded look (pretty self explanatory, I just like it)

flex flex-col: Technically this is two classes, but they work in tandem. flex declares the element to be a flex container, and flex-col quickly makes it into a column instead of the default row.

Step 4 - Pseudo-Classes

At this point, we should be pretty happy with the look we've created. Not only have we taken a pretty unique design and made it a reality with Tailwind, but we've learned how to customize Tailwind along the way! However, if you click on the buttons, you'll quickly realize that something is missing. That something is, well, anything. The buttons don't move, and certainly don't emulate the style present in the CodePen. Never fear! There is a quick fix for this, and some more learning to be had along the way.

First on our list is focus. We need this pseudo-class to remove the outline that appears around the buttons when you click them:

To do this, go to the class attributes of our buttons and add focus:outline-none. Then, click the buttons and you'll no longer see the outline!

Next, we need to remove the box-shadow on the buttons when they're pressed, which requires that we use the active pseudo-class. Go back to the buttons and add active:shadow-none. Click the buttons again and...

Nothing?

This is weird, right? active is clearly listed as an available pseudo-class in the docs. So what gives? Well, Tailwind provides us with a lot of functionality in the default build (which we got by running yarn build earlier). However, the active pseudo-class is not included in this default build, so we therefore have to include specify it as an available variant in our tailwind.config.js file. In that file, you'll notice a variants object. Add an entry for boxShadow like so:

//tailwind.config.js
...
variants: {
    boxShadow: ['active']
}
...

This tells Tailwind that we want to include the active pseudo-class for boxShadow only. If we try to use active on other classes, it won't work unless we specify it in the same way here. Re-run yarn build and refresh your browser. When you click the buttons, the box-shadow now disappears and makes it look like the buttons are flush with the card!

Step 5 - Transitions

The design is done at this point, but we can do one more thing to spice it up a bit. Go back to your buttons one last time, and add the following to your class:

transition-shadow ease-in-out duration-100

Your (finally) finished HTML should look like this:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <link rel="stylesheet" href="/build/index.css" />
    <title>Document</title>
  </head>
  <body>
    <div
      class="bg-light-theme-gray h-screen w-screen flex items-center justify-center"
    >
      <div class="h-card w-card shadow-light-card rounded-card">
        <div class="flex flex-col items-center">
          <img
            src="http://placedog.net/75/75"
            class="rounded-full m-x-auto mt-10 shadow-light-button"
            id="profilePhoto"
          />

          <span class="mt-6 font-bold text-lg text-light-font">Doggo</span>
          <span class="font-light text-sm text-light-font"
            >Frontend Engineer</span
          >

          <div class="mt-6 inline-block items-center">
            <button
              class="rounded-full h-button w-button m-2 shadow-light-button text-light-font font-extrabold text-sm focus:outline-none active:shadow-none transition-shadow ease-in-out duration-100"
            >
              Message
            </button>
            <button
              class="rounded-full h-button w-button m-2 shadow-light-button text-light-font font-extrabold text-sm focus:outline-none active:shadow-none transition-shadow ease-in-out duration-100"
            >
              Follow
            </button>
          </div>
        </div>
      </div>
    </div>
  </body>
</html>

All we've done in this step is add a transition for box-shadow, set the duration to 100 milliseconds, and specified the animation (ease-in-out). It's an easy addition, but makes a huge different for the feel of the card!

Conclusion

In this guide, we created a unique design from scratch, learned how to set up custom properties in TailwindCSS, and even learned how to add in non-default pseudo-classes. It's incredible how building one simple profile card can teach us so much, isn't it? You can view the completed code on the neumorphic_card branch of my tailwind-beginner-blog repo, at this link: https://github.com/sRobDev/tailwind-beginner-blog/tree/neumorphic_card

Thank you for reading, and be sure to give me a follow so you never miss out on a Tailwind Tidbit!

TailwindCSS: The Very Basics (Installation + IntelliSense)

Samuel Robertson — Wed, 05 Aug 2020 01:19:29 +0000

Introduction

You've finally done it. You've sat down, created a fresh new project, and are ready to get going with that snazzy, new, utility-first CSS framework called Tailwind. However, you're not sure where to start, or maybe you've gotten started and you can't get IntelliSense to work in VS Code. This post will take you from creating a completely new project to having TailwindCSS installed with IntelliSense up and running in Visual Studio Code in just a few easy steps.

Step 1 (or so) - yarn initialization

Navigate to your folder of choice to begin your project (or where you've already started it, though for this guide we will assume you have yet to start).

Now, create a folder with your project name or simply type:

mkdir tailwind-beginner-blog

(be sure to change the name to whatever you want!)

Next, we're going to initialize yarn, which will give us a package.json file and the ability to install TailwindCSS. You can alternatively use npm and most of the same commands will apply.

Navigate to your project folder in your terminal and initialize yarn:

cd tailwind-beginner-blog
yarn init -y

Note: The -y flag will answer yes to the default configuration questions from yarn. If you want more customization, simply type yarn init!

Congrats! You've now initialized yarn and can install TailwindCSS. Let's get right to it!

Step 2 - TailwindCSS Installation

For this step, simply run:

yarn add tailwindcss

You can open your package.json after running this command, and you should see tailwindcss under your dependencies:

{
  "name": "tailwind-beginner-blog",
  "version": "1.0.0",
  "main": "index.js",
  "license": "MIT",
  "dependencies": {
    "tailwindcss": "^1.6.2"
  }
}

Next, we need to set up a CSS file for our project. Create a new CSS file in your project and name it whatever you want. Mine will be index.css. Then, in that file, include these three Tailwind directives:

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

When Tailwind is built, these directives will be swapped out with CSS that Tailwind itself generates.

Congrats! You've now installed TailwindCSS. If you were to excitedly run over to your HTML and start throwing Tailwind classes into your class attribute though, you'd be a little disappointed. We've still got just a little more to go.

Step 3 - Adding a Tailwind Configuration File

This step is easy (just like most of this, hopefully). Go to your terminal in your project's root directory, and run this command:

npx tailwindcss init

If all goes well, you'll see a new tailwind.config.js file pop up in your project. This file will contain some empty configuration exports for Tailwind:

module.exports = {
  purge: [],
  theme: {
    extend: {},
  },
  variants: {},
  plugins: [],
}

Step 4 - Processing and Building Tailwind

One of the requirements of such a unique framework like Tailwind is that it requires a build process where CSS files are processed and Tailwind's CSS is inserted. For this, we're going to use PostCSS, which is also what Tailwind's own documentation recommends. In addition to this, we'll use autoprefixer, which adds vendor-specific prefixes to your CSS.

Head on over to your terminal again, and politely ask yarn to install these two plugins:

yarn add postcss-cli autoprefixer

Note: As before, you can go check your package.json to see if these packages installed properly!

Step 5 - PostCSS Configuration (and first build!)

We're almost there! Shortly, you'll be able to start writing TailwindCSS to your heart's content.

In your project's root directory, create a new file named postcss.config.js, open it, and add this:

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

This is telling PostCSS that it should process the CSS in our project with Tailwind, and then use autoprefixer to apply all the necessary vendor prefixes.

For the first time, we'll now be editing package.json ourselves. To make sure we're on the same page, this is what my package.json looks like at this point in the guide:

{
  "name": "tailwind-beginner-blog",
  "version": "1.0.0",
  "main": "index.js",
  "license": "MIT",
  "dependencies": {
    "autoprefixer": "^9.8.6",
    "postcss-cli": "^7.1.1",
    "tailwindcss": "^1.6.2"
  }
}

Under the ending brace of "dependencies", add this:

"scripts": {
    "build": "postcss index.css -o build/index.css"
  }

Note: Be sure to substitute with the name of your CSS file! If your file is in a subfolder, make sure to indicate that as well, such as styles/index.css.

Finally, your package.json should now look like this:

{
  "name": "tailwind-beginner-blog",
  "version": "1.0.0",
  "main": "index.js",
  "license": "MIT",
  "dependencies": {
    "autoprefixer": "^9.8.6",
    "postcss-cli": "^7.1.1",
    "tailwindcss": "^1.6.2"
  },
  "scripts": {
    "build": "postcss index.css -o build/index.css"
  }
}

What we've done is add a yarn script called build, that tells postcss to process our index.css file and send the output to the build subfolder in a CSS file of the same name. Now, open your terminal and run yarn build. You should see some output similar to this:

➜  tailwind-beginner-blog yarn build
yarn run v1.19.1
$ postcss index.css -o build/index.css
✨  Done in 3.16s.

Congrats! Your CSS has been processed with Tailwind. Now, if only we had a way to see that...

Step 6 - index.html Creation and Viewing Our CSS!

Almost there, I promise. In your project, create an HTML file (which I've named index.html here). Open that file, and type html:5. You should see a dropdown come up that has an html:5 option, which if you select it should display a box labeled Emmet Abbreviation. Hit enter, and you'll have the skeleton of a new HTML page:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>

</body>
</html>

Note: If the Emmet Abbreviation didn't work for you, just copy this HTML!

Inside the <head> tag, we need to add a link to our stylesheet (the <link> in the following snippet):

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="build/index.css"> 
</head>

Now, inside the <body> tag, insert this:

<div>Hello!</div>

This is the div where we'll see our TailwindCSS at work. Write out your first ever TailwindCSS class by adding a class with TailwindCSS classes inside it to your HTML:

<div class="bg-teal-400">Hello!</div>

Now open that file in your favorite web browser, and you should see this:

If you do, your TailwindCSS is in action! If you don't, take a few steps back and see if you can figure out where things went wrong.

For the final piece, let's get some help from Visual Studio Code with writing our TailwindCSS.

Final Step - Tailwind CSS IntelliSense!

In VS Code, open your Extensions and search for Tailwind CSS IntelliSense. Install it, then either restart VS Code or run >Developer: Reload Window in the VS Code command palette. After you've done this, open your HTML file again, and start adding another Tailwind class. You should see IntelliSense recommendations from VS Code, like this:

You're finally done! You're now up and running with TailwindCSS with IntelliSense. These steps should apply to most other projects, so once you have a handle on what we've gone over here, you'll be able to quickly and easily integrate Tailwind in many other projects (such as React, Vue, and so on). To continue learning about Tailwind, check out their official documentation!

Thanks for reading, and have fun with your new CSS framework!

Note: You can view the completed project in this repo: https://github.com/sRobDev/tailwind-beginner-blog

DEV Community: Samuel Robertson

TailwindCSS in CodeSandbox: A Detailed Guide

Introduction

Step 1 - CodeSandbox Node Template Setup

Step 2 - Serving the App via Express

Step 3 - Using live-server to Automatically Reload Our HTML

Step 4 - Installing TailwindCSS and Co. (PostCSS and autoprefixer)

Step 5 - Tailwind Purge Configuration

Step 6 - watch Script Modification and Final Additions to index.html

Tailwind Tidbits #1: Neumorphic Profile Card

Introduction

Step 1 - Adding Custom Colors

Step 2 - More and More Customization

Step 4 - Pseudo-Classes

Step 5 - Transitions

Conclusion

TailwindCSS: The Very Basics (Installation + IntelliSense)

Introduction

Step 1 (or so) - yarn initialization

Step 2 - TailwindCSS Installation

Step 3 - Adding a Tailwind Configuration File

Step 4 - Processing and Building Tailwind

Step 5 - PostCSS Configuration (and first build!)

Step 6 - index.html Creation and Viewing Our CSS!

Final Step - Tailwind CSS IntelliSense!

Step 3 - Using `live-server` to Automatically Reload Our HTML

Step 6 - `watch` Script Modification and Final Additions to `index.html`