|
| 1 | +# Statamic V2 |
| 2 | + |
| 3 | +Setting up TailwindCSS in Statamic V2 is relatively simple. Navigate to your Statamic theme folder: |
| 4 | + |
| 5 | +```sh |
| 6 | +cd site/themes/{your_theme} |
| 7 | +``` |
| 8 | + |
| 9 | +First thing we need to do is create a package.json file. |
| 10 | + |
| 11 | +```sh |
| 12 | +npm init |
| 13 | +``` |
| 14 | + |
| 15 | +Follow the instructions and once it's done, the next step is to install Tailwind itself. |
| 16 | + |
| 17 | +```sh |
| 18 | +npm install tailwindcss |
| 19 | +``` |
| 20 | + |
| 21 | +We then need to create a configuration file. To do this, run the following in your theme folder: |
| 22 | + |
| 23 | +```sh |
| 24 | +./node_modules/.bin/tailwind init |
| 25 | +``` |
| 26 | + |
| 27 | +This will create the config file for called `tailwind.config.js` within your theme folder. |
| 28 | + |
| 29 | +Because Statamic doesn't come with a compilation tool built in, we need to install one. For this tutorial, we'll be using Laravel Mix, which is a wrapper built around Webpack. It's much easier to use and works great with Statamic. |
| 30 | + |
| 31 | +In your Statamic theme folder, install Laravel Mix: |
| 32 | + |
| 33 | +```sh |
| 34 | +npm install laravel-mix |
| 35 | +``` |
| 36 | + |
| 37 | +For the sake of this example, we're going to create our CSS file in `resources/css/app.css`. This is in your theme folder, so it'll be something like `site/themes/{your_theme}/resources/css/app.css`. |
| 38 | + |
| 39 | +In that file, add: |
| 40 | + |
| 41 | +```postCss |
| 42 | +@tailwind base; |
| 43 | +@tailwind components; |
| 44 | +@tailwind utilities; |
| 45 | +``` |
| 46 | + |
| 47 | +Now create a file called `webpack.mix.js` in your theme folder. In it, add the following: |
| 48 | + |
| 49 | +```javascript |
| 50 | +const mix = require('laravel-mix'); |
| 51 | +const tailwindcss = require('tailwindcss'); |
| 52 | + |
| 53 | +mix.postCss('./resources/css/app.css', './css/app.css', [ |
| 54 | + tailwindcss('./tailwind.config.js') |
| 55 | + ] |
| 56 | +); |
| 57 | +``` |
| 58 | + |
| 59 | +We also need to install a package called `cross-env`. This is only really required if you're working on Windows. |
| 60 | + |
| 61 | +```bash |
| 62 | +npm install cross-env |
| 63 | +``` |
| 64 | + |
| 65 | +Once you've done that, open your `package.json` file and add the following: |
| 66 | + |
| 67 | +```json |
| 68 | +"scripts": { |
| 69 | + "dev": "npm run development", |
| 70 | + "development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js", |
| 71 | + "watch": "npm run development -- --watch", |
| 72 | + "watch-poll": "npm run watch -- --watch-poll", |
| 73 | + "hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js", |
| 74 | + "prod": "npm run production", |
| 75 | + "production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js" |
| 76 | +}, |
| 77 | +``` |
| 78 | + |
| 79 | +After you've done this, run `npm run dev`. This will output a your css file at `/css/app.css`. |
| 80 | + |
| 81 | +To hook this into your Statamic V2 theme, simply add the following to your `layouts/default.html`: |
| 82 | + |
| 83 | +```html |
| 84 | +<link rel="stylesheet" href="/site/themes/{your_theme}/css/app.css"> |
| 85 | +``` |
| 86 | + |
| 87 | +If you load your theme, you should now see the default styling. |
| 88 | + |
| 89 | +## Build once |
| 90 | + |
| 91 | +```bash |
| 92 | +npm run dev |
| 93 | +``` |
| 94 | + |
| 95 | +## Keep building |
| 96 | + |
| 97 | +```bash |
| 98 | +npm run watch |
| 99 | +``` |
0 commit comments