Please help with tailwind installation

1. I added first

“devDependencies”: {
@roots/bud”: “^6.11.0”,
@roots/bud-postcss”: “^6.11.0”,
@roots/bud-sass”: “^6.11.0”,
@roots/bud-tailwindcss”: “^6.11.0”,
@roots/sage”: “^6.11.0”
},
“dependencies”: {
“tailwindcss”: “^3.3.0”
}

then run yarn install

2. in bud.config.js i have

import { join } from ‘path’;
import tailwind from ‘@roots/bud-tailwindcss’;
import postcss from ‘@roots/bud-postcss’;
import sass from ‘@roots/bud-sass’;

/**

export default (app) => {
app.use(tailwind);
app.use(postcss);
app.use(sass);

app.entry(‘app’, [
join(app.paths.resources, ‘styles/app.scss’),
join(app.paths.resources, ‘scripts/app.js’),
]);

app.styles({
loader: {
implementation: ‘sass’,
},
});

app.postcss(({ options }) => {
options.preset = {
stage: false,
autoprefixer: app.enabled(‘autoprefixer’),
features: {
‘nesting-rules’: true,
},
};
});

app.tailwind(require(‘./tailwind.config.js’));
};

/**
 * Directory contents to be included in the compilation
 * @see {@link https://bud.js.org/docs/bud.assets/}
 */
.assets(['images'])

/**
 * Matched files trigger a page reload when modified
 * @see {@link https://bud.js.org/docs/bud.watch/}
 */
.watch(['resources/views', 'app'])

/**
 * Proxy origin (`WP_HOME`)
 * @see {@link https://bud.js.org/docs/bud.proxy/}
 */
.proxy('http://localhost')

/**
 * Development origin
 * @see {@link https://bud.js.org/docs/bud.serve/}
 */
.serve('http://localhost')

/**
 * URI of the `public` directory
 * @see {@link https://bud.js.org/docs/bud.setPublicPath/}
 */
.setPublicPath('/app/themes/sage/public/')

/**
 * Generate WordPress `theme.json`
 *
 * @note This overwrites `theme.json` on every build.
 *
 * @see {@link https://bud.js.org/extensions/sage/theme.json/}
 * @see {@link https://developer.wordpress.org/block-editor/how-to-guides/themes/theme-json/}
 */


.wpjson.settings({
  color: {
    custom: false,
    customDuotone: false,
    customGradient: false,
    defaultDuotone: false,
    defaultGradients: false,
    defaultPalette: false,
    duotone: [],
  },
  custom: {
    spacing: {},
    typography: {
      'font-size': {},
      'line-height': {},
    },
  },
  spacing: {
    padding: true,
    units: ['px', '%', 'em', 'rem', 'vw', 'vh'],
  },
  typography: {
    customFontSize: false,
  },
})
.useTailwindColors()
.useTailwindFontFamily()
.useTailwindFontSize()

.enable();

app.styles({
loader: {
implementation: ‘sass’,
},
});

app.postcss(({ options }) => {
options.preset = {
stage: false,
autoprefixer: app.enabled(‘autoprefixer’),
features: {
‘nesting-rules’: true,
},
};
});

3.in app.scss added

@import ‘tailwindcss/base’;
@import ‘tailwindcss/components’;
@import ‘tailwindcss/utilities’;

in tailwind.config.js

module.exports = {
content: [‘./resources//*.blade.php’, './resources//.js’, './resources/**/.vue’],
theme: {
extend: {},
},
variants: {
extend: {},
},
plugins: ,
};

when i run yarn build i recived this error: :hot_face::hot_face::hot_face:

/mnt/c/xampp/htdocs/BalkanBurrito/wp-content/themes/WEBTIK.BG/node_modules/yoga-layout-prebuilt/yoga-layout/build/Release/nbind.js:53
throw ex;
^

Error reading config file:
bud.config.js appears to be a bud config file, but it could not be imported.

Original error follows:
SyntaxError: Unexpected token ‘.’
at file:///mnt/c/xampp/htdocs/BalkanBurrito/wp-content/themes/WEBTIK.BG/node_modules/@roots/bud/lib/context/config.js:62:31
at async Promise.all (index 6)
at async Module.get (file:///mnt/c/xampp/htdocs/BalkanBurrito/wp-content/themes/WEBTIK.BG/node_modules/@roots/bud/lib/context/config.js:49:5)
at async default (file:///mnt/c/xampp/htdocs/BalkanBurrito/wp-content/themes/WEBTIK.BG/node_modules/@roots/bud/lib/context/index.js:28:18)
at async file:///mnt/c/xampp/htdocs/BalkanBurrito/wp-content/themes/WEBTIK.BG/node_modules/@roots/bud/lib/cli/app.js:15:17
error Command failed with exit code 7.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

Please guys helpp… thanksss

Hi @NekaDava,

Your bud.config.js has a lot of issues.

To get up and running with Sage 10 and Tailwind, all you need to do is clone GitHub - roots/sage: WordPress starter theme with Laravel Blade components and templates, Tailwind CSS, and a modern development workflow - and Tailwind will work out of the box. Follow the instructions on https://roots.io/sage/docs/installation/ and you should be fine!

If you’re trying to add Tailwind to an existing project, and have upgraded to Bud 6.11.0, then try replacing your bud.config.js with the default.

Hi Tom thank you so much for your reply you made my day very happy. Sorry if my questions are stupid but I’m still new and learning but I’m very interested. I have a few questions.

  1. After I clone the repo that you sent, what exactly from the documentation should I run through WSL because I’m using Windows? yarn yarn build? is acron already installed in the repo?
  2. I see that the styles are .css should I convert them to sass .css, if so how? I will be very happy if you answer. Have a nice day and greetings

Hi @NekaDava,

No questions are stupid! Glad you’re keen to get up and running with Sage.

On the topic of SASS:

1 Like

thanks for the advice Tom i did everything step by step as you described then i tried yarn and everything went ok but when i typed yarn build it gave this error

╭─ ✘ sage ./public [2c761a27aece09fb875e]

├─ ✘ error

│ Cannot find module ‘terser’
│ Require stack:
│ - ./node_modules/terser-webpack-plugin/dist/minify.js
│ - ./node_modules/jest-worker/build/workers/threadChild.js


├─ ✘ error

│ Cannot find module ‘terser’
│ Require stack:
│ - ./node_modules/terser-webpack-plugin/dist/minify.js
│ - ./node_modules/jest-worker/build/workers/threadChild.js


├─ ✘ error

│ Cannot find module ‘terser’
│ Require stack:
│ - ./node_modules/terser-webpack-plugin/dist/minify.js
│ - ./node_modules/jest-worker/build/workers/threadChild.js


├─ entrypoints
│ ├─ app
│ │ ├─ js/runtime.ab6e40.js 1.04 kB
│ │ ├─ js/259.a8b7e1.js 326 bytes
│ │ ├─ css/app.a35acd.css 5.19 kB
│ │ └─ js/app.98575a.js 412 bytes
│ └─ editor
│ ├─ js/runtime.ab6e40.js 1.04 kB
│ ├─ js/259.a8b7e1.js 326 bytes
│ ├─ css/editor.31d6cf.css 0 bytes
│ └─ js/editor.84c7af.js 576 bytes

╰─ compiled 24 modules in 274s 657ms

error Command failed with exit code 1.
info Visit yarn run | Yarn for documentation about this command.

please help i am very desperate

Using yarn dev recived

╭─ ✘ sage ./public [e4a2b7551d106f0627ea]

├─ ✘ error

│ Module Error (from …/node_modules/postcss-loader/dist/cjs.js):
│ Loading PostCSS “./node_modules/postcss-preset-env/dist/index.cjs” plugin
failed: Cannot find module
‘./node_modules/autoprefixer/node_modules/caniuse-lite/dist/unpacker/index.js’.
Please verify that the package.json has a valid “main” entry

│ (@./node_modules/tailwindcss/base.css)

├─ ✘ error

│ Module Error (from …/node_modules/postcss-loader/dist/cjs.js):
│ Loading PostCSS “./node_modules/postcss-preset-env/dist/index.cjs” plugin
failed: Cannot find module
‘./node_modules/autoprefixer/node_modules/caniuse-lite/dist/unpacker/index.js’.
Please verify that the package.json has a valid “main” entry

│ (@./node_modules/tailwindcss/components.css)

├─ ✘ error

│ Module Error (from …/node_modules/postcss-loader/dist/cjs.js):
│ Loading PostCSS “./node_modules/postcss-preset-env/dist/index.cjs” plugin
failed: Cannot find module
‘./node_modules/autoprefixer/node_modules/caniuse-lite/dist/unpacker/index.js’.
Please verify that the package.json has a valid “main” entry

│ (@./node_modules/tailwindcss/utilities.css)

├─ ✘ error

│ Module Error (from …/node_modules/postcss-loader/dist/cjs.js):
│ Loading PostCSS “./node_modules/postcss-preset-env/dist/index.cjs” plugin
failed: Cannot find module
‘./node_modules/autoprefixer/node_modules/caniuse-lite/dist/unpacker/index.js’.
Please verify that the package.json has a valid “main” entry

│ (@./resources/styles/app.css)

├─ ✘ error

│ Module Error (from …/node_modules/postcss-loader/dist/cjs.js):
│ Loading PostCSS “./node_modules/postcss-preset-env/dist/index.cjs” plugin
failed: Cannot find module
‘./node_modules/autoprefixer/node_modules/caniuse-lite/dist/unpacker/index.js’.
Please verify that the package.json has a valid “main” entry

│ (@./resources/styles/editor.css)

├─ entrypoints
│ ├─ app
│ │ ├─ js/runtime.js 46.81 kB
│ │ └─ js/app.js 34.94 kB
│ └─ editor
│ ├─ js/runtime.js 46.81 kB
│ └─ js/editor.js 26.77 kB

╰─ compiled 47 modules in 135s 970ms

╭─ server

├─ proxy: http://localhost/
├─ dev: http://localhost:3000/

╰─ watching project sources (and 25 other files)

the solution was to reinstall yarn first then write yarn first and then yarn dev.

now the question is when I try to upload to github the system tries to fork the original repo and not upload to mine. which files from the sage folder should I remove so the files only go to my repo maybe .github folder? Thanks in advanced!!i am so happy

Glad you got it working!

You know I said:

Well, it turns out, there is such thing as stupid advice :sweat_smile:. The reason why you’re having problems uploading to Github, is because I told you to clone the repo, and not use composer create-project as described in the docs. That’s my mistake - sorry.

Anyway, you should be able to delete .git to clear your GIT history, and then init and push to Github. That’ll give you a detached repo.

Or just go back and start over using composer create-project to clone and detach the repo for you.

Sorry for the confusion.

Thank you so much Tom I started over and everything went very smoothly. I am very happy. I tested the blades and they work perfectly! My question is, since it is a fresh installation, should I set <head> <footer> somewhere and should I link tailwind and the other styles there, because at the moment when I write a style in editor.css it is not reflected on the website? am i doing it right?
I put this div to the test

   <div class="bg-blue-500 text-white p-4">
   <h1 class="text-2xl">Hello, this is a Tailwind CSS test!</h1>
</div>

and the website stays pure white as if it were pure html. Thanks in advance ! Greetings

Your editor.css file is only loaded by default when using the post editor. app.css is where any frontend styling should go.

Any Tailwind classes used in blade templates should be automatically included in your app bundle, whilst yarn dev is running. There is no need to link the stylesheets from <head> manually.




Hi, thanks for your time! Can you look at these pictures? I have the feeling that the site does not respond to the styles and tailwind?

Hi @NekaDava,

In the browser console, there seem to be 2 errors. I suspect that’s the cause of the stylesheet not loading. Please can you share your current bud.config.js? Your proxy origin or public path is probably not quite right.

Remember, when sharing code on the forums, wrap it in triple backticks - ``` - it’ll make the code much easier to read!

Hi Tom, I hope you’re okay
Thanks for the reply. I did some tests log1x helped me for which I thank him and we found that everything works, but you have to stop the yarn server and run yarn dev to reflect the changes, that is, it does not compile in real time. when I try to access localhost:3000 through it says
Error occurred while trying to proxy: localhost:3000/. I will be very happy if we solve the case. greetings





P.S. my ip that is visible from wsl is 192.168.16.1 maybe issue is around this?

Hello!

It’s hard to tell what’s going on from screenshots, but I would double check balkanburrito.test is resolving to your HTTP server’s IP from within WSL.

The 504 on port 3000 suggests that the upstream isn’t configured correctly.

What HTTP stack are you running? I think I saw a reference to xampp previously?

Hi Tom, i am using laragon currently.
How can i check if balkanburrito.test converts HTTP server IP address from WSL?

  1. in C:\Windows\System32\drivers\etc\hosts - contain
    127.0.0.1 BalkanBurrito.test #laragon magic! I have attached a photo
  2. from wsl i run nslookup balkanburrito.test I have attached a photo . Thank you