# Symfony 5/6 and Tailwindcss 3

## Requirements

- symfony/webpack-encore-bundle

## Steps

Add Tailwindcss & Friends with Yarn:

```
yarn add tailwindcss@latest postcss@latest postcss-loader@latest autoprefixer@latest --dev
```

Create file `tailwind.config.js` with following contents:

```
module.exports = {
  content: [
    "./assets/**/*.{js}",
    "./templates/**/*.{html,js,twig}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}
```

Create file `postcss.config.js` with following contents:

```
module.exports = {
    plugins: [
        require('tailwindcss'),
        require('autoprefixer'),
    ]
}
```

Add this line to `webpack.config.js`;

```
.enablePostCssLoader()
```

Create some styles with Tailwindcss in `assets/styles/app.css`:

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

body {
    @apply bg-gradient-to-r from-purple-400 via-pink-500 to-red-500;
}
h1 {
    @apply text-2xl font-bold leading-7 sm:text-3xl sm:truncate mt-8 mb-8 filter drop-shadow-lg font-mono;
}
```

Build CSS:

```
yarn encore dev --watch
```

Check your site with styles created with Tailwindcss