The latest articles on DEV Community by Hridoy Halder Partho (@hridoypartho). https://dev.to/hridoypartho https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F663193%2Fb5cbab3b-91db-441c-876c-c7b672f14ee8.jpeg https://dev.to/hridoypartho en Hridoy Halder Partho Sun, 23 Apr 2023 05:22:43 +0000 https://dev.to/hridoypartho/set-up-tailwind-css-with-vite-react-app-and-yarn-2ge2 https://dev.to/hridoypartho/set-up-tailwind-css-with-vite-react-app-and-yarn-2ge2 <h2> Install Tailwind CSS with postcss &amp; autoprefixer </h2> <div class="highlight js-code-highlight"> <pre class="highlight plaintext"><code>yarn add -D tailwindcss postcss autoprefixer </code></pre> </div> <h2> Generate tailwind.config.js and postcss.config.js </h2> <div class="highlight js-code-highlight"> <pre class="highlight plaintext"><code>yarn tailwindcss init -p </code></pre> </div> <h2> Modify tailwind.config.js file </h2> <div class="highlight js-code-highlight"> <pre class="highlight plaintext"><code>/** @type {import('tailwindcss').Config} */ module.exports = { content: ["./src/**/*.{html,js}"], theme: { extend: {}, }, plugins: [], } </code></pre> </div> <h2> Add tailwind base, components and utilities to index.css </h2> <div class="highlight js-code-highlight"> <pre class="highlight plaintext"><code>@tailwind base; @tailwind components; @tailwind utilities; </code></pre> </div> react tailwindcss javascript webdev