#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💥💥💥
• Check out more of my posts on dev.to: https://dev.to/lexycodestudio/