1# create a package file
npm init -y
2# Install Tailwind via npm
For most projects (and to take advantage of Tailwind's customization features), you'll want to install Tailwind via npm or refer to tailwind official website
Using npm
npm install tailwindcss
Using Yarn
yarn add tailwindcss
3# Create your Tailwind config file
If you'd like to customize your Tailwind installation, you can generate a config file for your project using the Tailwind CLI utility included when you install the tailwindcss npm package:
npx tailwindcss init
This will create a minimal tailwind.config.js file at the root of your project:
// tailwind.config.js
module.exports = {
theme: {},
variants: {},
plugins: [],
}
4# Process your CSS with Tailwind
Using Tailwind with PostCSS
create a file called 'postcss.config.js' and add the following:
Generally this means adding Tailwind as a plugin in your postcss.config.js file:
module.exports = {
plugins: [
// ...
require('tailwindcss'),
require('autoprefixer'),
// ...
]
}
5# Add Tailwind to your CSS
Create a folder called CSS and add a file called tailwind.css.
Use the @tailwind directive to inject Tailwind's base, components, and utilities styles into your CSS:
@tailwind base;
@tailwind components;
@tailwind utilities;
6# Finally
-Go to package.json file and under script change test script to "build": "postcss css/tailwind.css -o public/build/tailwind.css"
-Now run npm run build
a new folder with public and sub-folder build having tailwind.css file will be created.
-Create a new file called index.html inside the public folder.
Boom💥💥💥
Top comments (0)