# Install Tailwindcss in Svelte with 1 command


Original: https://codingcat.dev/post/install-tailwindcss-in-svelte-with-1-command


Here is how to install Tailwindcss in Svelte

```bash
npx svelte-add tailwindcss
```

Yep thats it you don’t need anything else :D




Okay so what does this actually do?

![](https://s3.us-west-2.amazonaws.com/secure.notion-static.com/3e70bedb-b6cd-4918-b4ba-7b23743df791/Untitled.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Content-Sha256=UNSIGNED-PAYLOAD&X-Amz-Credential=AKIAT73L2G45EIPT3X45%2F20221129%2Fus-west-2%2Fs3%2Faws4_request&X-Amz-Date=20221129T150710Z&X-Amz-Expires=3600&X-Amz-Signature=e0a5965a1dd77a3665c3eda1715ec46fdd23c3b254bc07b191751f515a8e89e6&X-Amz-SignedHeaders=host&x-id=GetObject)

## Update ./package.json

Includes the required development packages.

```javascript
"devDependencies": {
...
"postcss": "^8.4.14",
"postcss-load-config": "^4.0.1",
"svelte-preprocess": "^4.10.7",
"autoprefixer": "^10.4.7",
"tailwindcss": "^3.1.5"
}
```

## Add ./tailwind.config.json

Adds the correct configuration for Tailwind, which adds all of the necessary content file types.

```javascript
const config = {
	content: ['./src/**/*.{html,js,svelte,ts}'],

	theme: {
		extend: {}
	},

	plugins: []
};

module.exports = config;
```

## Update ./svelte.config.js

Updates to add the preprocess requirement. 

```javascript
import preprocess from 'svelte-preprocess';

...
preprocess: [
		preprocess({
			postcss: true
		})
	]
...
```

## Add ./postcss.config.cjs

```javascript
const tailwindcss = require('tailwindcss');
const autoprefixer = require('autoprefixer');

const config = {
	plugins: [
		//Some plugins, like tailwindcss/nesting, need to run before Tailwind,
		tailwindcss(),
		//But others, like autoprefixer, need to run after,
		autoprefixer
	]
};

module.exports = config;
```

## Add ./src/app.postcss

Includes the global files

```css
/* Write your global styles here, in PostCSS syntax */
@tailwind base;
@tailwind components;
@tailwind utilities;
```

## Add ./src/routes/+layout.svelte

```javascript
<script>
	import '../app.postcss';
</script>

<slot />
```