DEV Community

Cover image for Getting Started with Tailwind CSS
Martins Onuoha
Martins Onuoha

Posted on

Getting Started with Tailwind CSS

Tailwind CSS is a Utility-first CSS Framework for building modern, user-friendly UI components. By Utility first, I mean Tailwind focuses on the singularity of CSS classes, ensuring a single class does exactly one thing.

Want to give Tailwind CSS a spin, but you’re not sure where to start? Let me show you.


Requirements

  • Node.js v12 and above setup.
  • Basic HTML and CSS knowledge.

The installation guide has detailed descriptions on how to get started with integrating tailwind CSS with Javascript Frontend Frameworks.

Frontend frameworks

If you, only have basic experience with HTML and CSS and want to get started with Tailwind, first, ensure you run Node version v12.16 or above. Next, you’ll want first to install NPX globally. If you are running NPM version 5 and above, npx should already come pre-bundled with npm.

npm i -g npx
Enter fullscreen mode Exit fullscreen mode

Once it’s installed, create a basic web project. I’ll keep it as simple as possible. Our project structure would look something like this:

Project folder

Now from your terminal, change to the styles directory and run this command to generate a compiled tailwind.css file within that directory:

npx tailwindcss-cli@latest build -o tailwind.css
Enter fullscreen mode Exit fullscreen mode

Once that’s successfully installed, you should see a prompt in your terminal like this.

Terminal prompt

A new file, “tailwind.css” should now live in your styles directory.

Styles directory
You can now link this CSS file in your index.html file like you normally would any stylesheet.

CSS file
You’re good to go from here on. Open the HTML file in your browser and start hacking. You’d only need to read the documentationto find whatever utility class you need. Check out a demo here.

CUJ image

You can also find the source code for the demo here:

GitHub logo MartinsOnuoha / tailwind-basic

A Basic setup of Tailwind CSS for static HTML & CSS projects


Cheers ☕️

Top comments (0)