FrontEnd web
Published in

FrontEnd web

HTML + CSS

How to start with a tailwind CSS locally?

Build a local Tailwind CSS development environment for your HTML and JavaScript project.

You install Tailwind CSS with the help of postcss inside HTML Project. However, I faced a problem when I started the installation of tailwind CSS. However, the main problem is less clarification. In the article, I create a live server with tailwindcss, postcss, autoprefixer, and postcss-cli.

How to start with a tailwind CSS locally?
demo

Folder structure

How to start with a tailwind CSS locally?
How to start with a tailwind CSS locally?

All the code is available on Github. So you can easily play with code locally. But is not work with online IDE.make sure you change the code according to IDE. It works fine locally in your browser.

Steps

  1. Install Tailwind CSS postcss and Other npm packages
  2. Create Tailwindcss Config file
  3. Configure your template paths
  4. Create a Postcss config file
  5. Add the Tailwind directives to your CSS
  6. Add tailwind CSS scripts ( Important )
  7. Start the dev server

Note

The most critical step is four. All the other steps are the same, according to the tailwindcss document.

Install Tailwind CSS postcss and Other npm packages

In the first step, we install some npm packages. which is required for our project.

npm install -D tailwindcss postcss autoprefixer live-server postcss-cli

Create Tailwindcss Config file

Create tailwind.config.js file in root level with the following tailwindcss command.

npx tailwindcss init

Configure your template paths

tailwindcss init command to create a boilerplate code tailwind.config.js file in your root folder.

module.exports = {content: [""],theme: {  extend: {}, },plugins: [],}

After you add, you configure template paths in content the section. The basis means that we tell the tailwind CSS in the specified folder any tailwind class present. Now you add those classes into the tailwind CSS build file.

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

In my case, any root level HTML and javascript file to watch and build the tailwindcss production file.

If all files are in src folder, your content section looks like this.

content: ["./src/*.{html,js}"],

Create a Postcss config file

You create a postcss.config.js file and paste the following code.

module.exports = {   plugins: {     tailwindcss: {},     autoprefixer: {},   }}

Add the Tailwind directives to your CSS

Add the @tailwind directives to your main.css file.

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

Add tailwind CSS scripts.

In the step, we add our custom script for our tailwindcss. Unfortunately, the following npm script does not provide by tailwindcss. So instead, we create a custom script using another npm package, which we install in the first step.

"scripts": {"tailwind": "tailwindcss  -i ./css/main.css -o build/tailwind.css --minify  & live-server  ","dev": " live-server  & postcss css/main.css -o ./build/tailwind.css --minify --watch  ","start": "live-server ./ ","build": "postcss css/main.css -o build/tailwind.css --minify"},

Command

  1. tailwind
  2. dev
  3. start
  4. build

tailwind

Start the tailwindcss server with tailwind CLI.

Dev

Start the tailwind development server using postcss and postcss cli.

start

Start your local server with live-server NPM package.

build

Build your comprise or minify the tailwind CSS production file without live-server

Start the dev server.

In the last step, start your development server with npm run dev command.

Conclusion

I hope you understand the topic. Suppose you have any queries or questions. Then tell me in the comment section.

You can follow and read more articles on officialrajdeepsingh.dev and tag them on Twitter.

Read More content on the frontend web. Sign up for a free newsletter and join the frontend web community on medium.

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store