Confuse about base.css with v3.0.0-alpha.1

[sinyayadynya]

I'm using Tailwind within Drupal Emulsify theme with Webpack.

With TailwindCSS 2, I was loading the base.min.css into the Drupal theme library.yml file:

tailwind: css: theme: node_modules/tailwindcss/dist/base.min.css: {}

and I had the following code within ../components/style.scss:

// Tailwind
@import '~tailwindcss/base';
@import '~tailwindcss/components';

// Components
@import '00-base/**/*.scss';
@import '01-atoms/**/*.scss';
@import '02-molecules/**/*.scss';

@import '03-organisms/**/*.scss';
@import '04-templates/**/*.scss';

// Tailwind utilities
@import '~tailwindcss/utilities'

and in tailwind.config.js :
module.exports = { content: ['./components/**/*.twig', './templates/**/*.html.twig'], }

Following @VicGUTT 's advice I have now removed the base.min.css from the library and while I have no more error, I'm still obviously missing base.css and can't find where/how to add @​tailwind base.

Any help most welcome!

[adamwathan]

Hmm the line @import '~tailwindcss/base'; should be giving you @tailwind base, as that's all that's in that file:

https://github.com/tailwindlabs/tailwindcss/blob/master/base.css

Can you provide an actual reproduction project I can pull down and run?

[sinyayadynya]

I have checked and re-uploaded the theme at https://github.com/sinyayadynya/melon. Don't know what went wrong, probably too much in hurry, sorry. Now the yarn build should work.

[adamwathan]

Looks like it's private now maybe because I'm getting a 404, can you double check and then I can take a look?

[sinyayadynya]

@adamwathan seems that everything is OK now. What made me think that I lost base.css is because some Emulsify bem stuff started to interfere, while somehow it wasn't before.

Also ended using the following code for style.scss:

// Libraries
// @import '~normalize.css/normalize';
@import '~breakpoint-sass/stylesheets/breakpoint';

// Tailwind
@import 'tailwindcss/base';
@import 'tailwindcss/components';

// Components
@import '00-base/**/*.scss';
@import '01-atoms/**/*.scss';
@import '02-molecules/**/*.scss';

@import '03-organisms/**/*.scss';
@import '04-templates/**/*.scss';

// Tailwind Utilities
@import 'tailwindcss/utilities';

And now everything looks fine!

[sinyayadynya]

Looks like it's private now maybe because I'm getting a 404, can you double check and then I can take a look?

Yep, I really was too much in hurry. Now updating it again in public: https://github.com/sinyayadynya/melon.

But as explained above, it seems that everything is super fine now. A really big thanks for caring @adamwathan and sorry for the mess.

Only noticed a small dependency issue with tailwindcss-aspect-ratio: tailwindlabs/tailwindcss-aspect-ratio#24

This apart, I'm very much tempted to build a new Drupal base theme using Vite, Tailwind and Alpine. I liked the atomic structure of Emulsify, but most of the time do not use Storybook and all the time I have to replace most of the bem code with Tailwind in twig. Maybe do you know someone interested to collaborate on such project?

[simonswiss]

Good to hear you've got it sorted!

Repo still seems to be private – one thing I was wondering is you might get a lot of repeating (or conflicting) styles between normalize.css/normalize and tailwindcss/base (unless you opt out of Tailwind's preflight).

And might be worth spending some time to mirror the breakpoint-sass/stylesheets/breakpoint over to theme.screens in the Tailwind config file so everything lines up nicely.

You might find this video relevant for integrating Tailwind CSS with an existing CSS codebase:

https://www.youtube.com/watch?v=oG6XPy1t1KA