avaitla/README.md

## README.md

      
    Raw
  

              README.md
            
          
    Setup:
$ npm init
$ npm install tailwindcss@1.7.6

Place index.html, tailwind.config.js, postcss.config.js, and styles.css in the same folder.
Run the following which works ✅
$ npm install @tailwindcss/ui@0.5.0
$ npx tailwindcss build styles.css -o output.css

Open index.html and see that hovering changes the color of the button
Now run the following which doesn't work ❌
$ npm install @tailwindcss/ui@0.6.0
$ npx tailwindcss build styles.css -o output.css

Open index.html and see that hovering no longer changes the color of the button

  
## index.html
<html>
<head>
  <link rel="stylesheet" href="output.css">
</head>
<body>
  <button class="bg-transparent hover:bg-blue-500 text-blue-700 hover:text-white">
    Hover me
  </button>
</body>
</html>

## postcss.config.js
module.exports = {
  plugins: [
    require('tailwindcss'),
    require('autoprefixer')
  ]
}

## styles.css
@import "tailwindcss/base";
@import "tailwindcss/components";
@import "tailwindcss/utilities";

## tailwind.config.js
module.exports = {
  purge: {
    content: ['index.html'],
  },
  plugins: [
    require('@tailwindcss/ui')
  ]
}
	<html>
	<head>
	<link rel="stylesheet" href="output.css">
	</head>
	<body>
	<button class="bg-transparent hover:bg-blue-500 text-blue-700 hover:text-white">
	Hover me
	</button>
	</body>
	</html>
	module.exports = {
	plugins: [
	require('tailwindcss'),
	require('autoprefixer')
	]
	}
	@import "tailwindcss/base";
	@import "tailwindcss/components";
	@import "tailwindcss/utilities";
	module.exports = {
	purge: {
	content: ['index.html'],
	},
	plugins: [
	require('@tailwindcss/ui')
	]
	}