Overview
TailwindCSS is the first utility CSS framework. so you can customize your styling in Tailwind. In Tailwind CSS there are classes for almost all kinds of margins, padding, backgrounds, font sizes, font families, positions, shadows, etc…
Tailwind CSS was released in November 2017 which is developed and maintained by ADAM Wathan.In this blog , we are going to take a glimpse of how designers can start TailwindCSS in HTML development.
TailwindCSS setup with PostCSS:
For the setup of Tailwind CSS, you need to have Node.js 12.13.0 or higher. Now Create a New project folder for tailwind.
- For the very first time, you need to initialize the package.json file in your folder. It enables us to use the node.js package manager for managing our project dependencies.
npm init -y
POSTCSS Plugin:
TailwindCSS provides @tailwind directives to include Tailwind’s Base, Components, and Utilities styles. Tailwind switches these directives to styles in CSS forms in the build procedure.
To set up a build procedure, we have to use the PostCSS plugin. PostCSS is a tool for transforming CSS with Javascript. So it is easy to build all the CSS styles from directives with the TailwindCSS PostCSS plugin.
In this project we will use an autoprefixer plugin. This plugin parses CSS code and includes vendor prefixes. Vendor prefixes means -webkit , -moz , -ms css.
For example :
.appearance-none {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
- To take complete advantage of the features of TailwindCSS we need to install the TailwindCSS package with PostCSS packages and autoprefixer plugin by this command.
npm install tailwindcss@latest postcss@latest autoprefixer@latest
After this command, we can see a node_modules folder and package-lock.json file in our project folder.
- Now we need to create an initial configuration file of tailwind with the below command.
npx tailwindcss init
This command creates one file tailwind.config.js, we can modify tailwind styles and add our classes to this file.
- For including @tailwind directives we need to create an src folder at the root of our project. In this, we have to create a CSS folder for all the styles and then create tailwind-directives.css file.
Now put all three directives in tailwind-directives.css@tailwind base; @tailwind components; @tailwind utilities;
If you are using import PostCSS plugin then you need to add @import directive instead of @tailwind directive
@import "tailwindcss/base"; @import "tailwindcss/components"; @import "tailwindcss/utilities";
- Now let’s create a Postcss.config.js (PostCSS configuration file) at the root of your project and add this code in this file
module.exports = { plugins: { tailwindcss: {}, autoprefixer: {}, } } - To execute the build procedure for generating tailwind styles from the tailwind-directives.css file, there are 2 ways to do this.
- By using the run npx command directly in the terminal.
npx tailwindcss build src/css/tailwind-directives.css -o src/css/tailwind.css
This command generates tailwind.css with all the tailwindCSS styles and vendor prefixes.
- Compile tailwind.css in package.json
"scripts": { "build": "tailwind build src/css/tailwind-directives.css -o src/css/tailwind.css" }
- By using the run npx command directly in the terminal.
After that run the build command :
npm run build
You can check that there is one generated file tailwind.css in your project folder with all tailwindCSS styles and Autoprefixer vendor prefixes are already added. -Webkit, -moz are already available in tailwind.css.
TailwindCSS setup only with Autoprefixer :
A lot of steps are common as the above topic so here are the steps without description.
npm init -y
npm install tailwindcss
- Let’s install the autoprefixer plugin with this command.
npm install autoprefixer
npx tailwindcss init
- For including @tailwind directives we need to create an src folder at the root of our project. In this, we have to create a CSS folder for all the styles and then create tailwind-directives.css file.
Now put all three directives in tailwind-directives.css@tailwind base; @tailwind components; @tailwind utilities;
- To execute the build procedure to generate tailwind styles in the css folder from tailwind-directives.css file, let’s run below command. This command generates tailwind.css with all the tailwindCSS styles and vendor prefixes.
npx tailwindcss build src/csscss/tailwind-directives.css -o src/css/tailwind.css
Conclusion
I hope this blog might be useful for those who are new in the designing field. Our next blog is on How to setup tailwindCSS in a react project.
You may also like
Top Laravel Development Companies in India to Watch Out For in 2024
Today’s modern-day consumers demand aesthetically pleasing...
Laravel 11: Suite of New Features Unlocked!
Web application development is at an all time high. And, so is the PhP framework giant- Laravel. Wit...
Why Your Business Need to Hire a Professional Web Development Company?
Businesses of all walks and sizes hinge on web development c...
