Угловая установка 4 tailwindcss

Есть ли способ настроить tailwindcss ( https://tailwindcss.com/) с Angular (4+)?

Я с радостью извлекаю проект Angular, чтобы сделать доступной конфигурацию веб-пакета. Но я не уверен, что поместить в webpack.config.js, чтобы tailwindcss хорошо работал с внутренними компонентами Angular.

Было бы здорово иметь такую ​​настройку, чтобы я мог по-прежнему использовать одну команду для dev (что-то вроде 'npm start') и продолжать наблюдать за изменениями в файле (включая css). То же самое для построения проекта.

Благодарю.

Источник

3 ответа

Решение

Способ 1: (с помощью ng-eject)

Вы можете найти полные шаги в этом великолепном видео Тома Гобича, которое я продолжил бы следующим образом:

  1. Внесите Sass в свой проект. Если начать с нуля, просто запустите:

    $ ng new project --style=scss

  2. Зайдите в проект, установите tailwindcss и сгенерируйте файл конфигурации:

    $ cd project
$ npm install tailwindcss --save-dev 
$ ./node_modules/.bin/tailwind init tailwind.config.js

  3. Извлеките ваше приложение, чтобы вывести файл конфигурации webpack и решить новые зависимости:

    $ ng eject
$ npm install

  4. добавьте плагин tailwindcss в файл webpack.config.js:

    const tailwindcss = require('tailwindcss'); // <-- create this constant
...

const postcssPlugins = function () {
   ...
   return [
      postcssUrl({
        ...
      }),
      tailwindcss('./tailwind.config.js'), //<-- then add it here
      autoprefixer(),
      ...
 };

  5. добавьте директивы @tailwind в src / styles.scss:

    @tailwind preflight;

// your custom components goes here.

@tailwind utilities;

// your custom utilities goes here.

  6. Начните создавать свои компоненты попутного ветра или возьмите образец кода онлайн и поместите его в src/app/app.component.html для быстрых тестов, затем запустите:

    $ npm start

Способ 2: (без ng-извлечения)

Как упоминалось в этой замечательной статье @hackafro (Ричард Умоффия), вы также можете использовать CLI Tailwind для обработки таблицы стилей. Для этого после создания приложения и создания файла конфигурации попутного ветра:

$ ng new project
$ cd project
$ npm install tailwindcss --save-dev 
$ ./node_modules/.bin/tailwind init tailwind.config.js

Создайте новый файл на том же уровне styles.css, назови это tailwind-build.css например, и добавить следующий контент к нему:

@tailwind preflight;

// your custom components goes here.

@tailwind utilities;

// your custom utilities goes here.

Затем в вашем файле package.json добавьте эти 2 скрипта под script атрибут:

{
  ...
  "scripts": {
    ...
    "tailwind": "./node_modules/.bin/tailwind build ./src/tailwind-build.css -c ./tailwind.config.js -o ./src/styles.css",
    "prestart": "npm run tailwind" // or "yarn run tailwind" depending on which you are using
  }
},

Теперь каждый раз, когда вы запускаете свой сервер, или каждый раз, когда вы вручную печатаете в терминале:

npm run tailwind // or "yarn run tailwind"

CLI Tailwind будет использоваться для заполнения ./src/styles.css контент для вас, который должен работать нормально, так как angular CLI уже применяет плагины postCSS поверх него, включая авторефиксер, подробнее об этом здесь: вот как angular-cli/webpack доставляет ваши стили CSS клиенту

Источник

Я собрал немного JavaScript, используя chokidar, чтобы посмотреть мои файлы попутного ветра и построить их, когда в моих файлах попутного ветра происходят изменения, поскольку Angular (начиная с 6.0.3, насколько мне известно) не разрешает доступ к плагинам postcss в Проект CLI (который, по моему скромному мнению, вполне подходит).

chokidar.js (файл верхнего уровня, прямо рядом с package.json):

const chokidar = require('chokidar')
const child = require('child_process')

const tailwind = chokidar.watch(['tailwind.js', './src/tailwind.css'])

tailwind.on('change', (event, path) => {
  child.exec('npm run build-tailwind')
  console.log('Reprocessing Tailwind Files')
})

Скрипты package.json:

"scripts": {
  "ng": "ng",
  "build-tailwind": "./node_modules/.bin/tailwind build ./src/tailwind.css -c ./tailwind.js -o ./src/styles.css",
  "prestart": "npm run build-tailwind",
  "start": "ng serve & node chokidar.js",
  "build": "npm run prestart && ng build"
}

Как вы можете видеть из скрипта build-tailwind, я просто положил tailwind.css в src/ папка с глобальным styles.css, и все мои собственные CSS идут туда, как любой другой проект попутного ветра.

tailwind.css:

@tailwind preflight;

/* custom components */

@tailwind utilities;

/* custom utilities */

Я надеюсь, что это поможет кому-то, пока мы ждем, пока Angular предоставит нам доступ к post-css напрямую.

ОБНОВИТЬ:

Я создал инструмент cli для npm, чтобы это было легко для всех, кто пытается воспользоваться преимуществами попутного ветра в своих угловых проектах.

https://www.npmjs.com/package/ng-tailwindcss

Источник

Есть лучший способ без необходимости извлекать CLI и без специального сценария npm для попутного ветра, а просто подключившись к загрузчикам веб-пакетов вашего CLI.

Вам необходимо установить npm install -D @angular-builders/custom-webpack postcss-scss tailwindcss

Затем создайте webpack.config.js файл конфигурации:

module.exports = {
  module: {
    rules: [
      {
        test: /\.scss$/,
        loader: 'postcss-loader',
        options: {
          ident: 'postcss',
          syntax: 'postcss-scss',
          plugins: () => [
            require('postcss-import'),
            require('tailwindcss')('./tailwind.config.js'),
          ]
        }
      }
    ]
  }
};

Тогда измените свой angular.json файл для использования этой новой конфигурации:

...
"build": {
  "builder": "@angular-builders/custom-webpack:browser",
  "options": {
    "customWebpackConfig": {
      "path": "webpack.config.js"
    },
    ...
  }
},
...

Импортируйте утилиты попутного ветра в свой styles.scss

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

А теперь просто беги npm start и вы готовы использовать классы попутного ветра в своем HTML или @apply в своих файлах SCSS!

Надеюсь это поможет.

Я создал сообщение, чтобы подробно объяснить, как это сделать - https://medium.com/@joao.a.edmundo/angular-cli-tailwindcss-purgecss-2853ef422c02

Источник

Если кто-то следит за ответом Салема выше и имеет ошибку "atRule.before is not function", просто обновите все зависимости PostCSS до последней версии, и все должно работать снова.

Источник
Другие вопросы по тегам