Unable to use Tailwindcss in codesandbox

Question

Can anyone please guide why tailwindcss isn't applying styles in this react codesandbox? https://codesandbox.io/p/devbox/runtime-pine-78z6th?file=%2Fsrc%2Fstyles.css. I installed tailwind through "dependencies" section and then added following code to styles.css file:

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

Answer 1

It seems like you did not follow all the steps to integrate Tailwind CSS into your Vite React project. As per the documentation:

1. (From step 2) Run the following command in the terminal to generate boilerplate postcss.config.js and tailwind.config.js files:

   npx tailwindcss init -p
   

2. (From step 3) Add src/App.jsx to the content file globs array in tailwind.config.js :

   /** @type {import('tailwindcss').Config} */
   module.exports = {
     content: ["src/App.jsx"],
   

3. bg-blue used in App.jsx would not resolve to a Tailwind class name with the default configuration, so I modified the Tailwind configuration to include blue as a color:

   /** @type {import('tailwindcss').Config} */
   module.exports = {
     …
     theme: {
       extend: {
         colors: {
           blue: {
             DEFAULT: "blue",
   

See Tailwind working with the above steps undertaken in this forked CodeSandbox.